js获取浏览器屏幕宽度和高度

在JavaScript中，可以通过window.innerWidth和window.innerHeight属性来获取浏览器窗口的宽度和高度，这两个属性包括了滚动条的宽度（如果滚动条显示的话）。如果你想获取整个屏幕的宽度和高度，不考虑浏览器窗口的大小，可以使用screen.width和screen.height属性。

以下是一些示例代码：

获取浏览器窗口的宽度和高度：

// 获取浏览器窗口的宽度
var windowWidth = window.innerWidth;
console.log("浏览器窗口宽度: " + windowWidth + "px");

// 获取浏览器窗口的高度
var windowHeight = window.innerHeight;
console.log("浏览器窗口高度: " + windowHeight + "px");

获取整个屏幕的宽度和高度：

// 获取屏幕的宽度
var screenWidth = screen.width;
console.log("屏幕宽度: " + screenWidth + "px");

// 获取屏幕的高度
var screenHeight = screen.height;
console.log("屏幕高度: " + screenHeight + "px");

应用场景：

响应式设计：根据不同的屏幕尺寸调整页面布局。
页面元素定位：根据屏幕尺寸动态调整元素的位置和大小。
全屏应用：检测是否处于全屏模式，或者在全屏模式下获取屏幕的实际尺寸。

注意事项：

window.innerWidth和window.innerHeight获取的是可视区域的尺寸，如果页面有滚动条，这些值会包括滚动条占据的空间。
screen.width和screen.height获取的是整个屏幕的分辨率，与浏览器窗口是否打开无关。
当用户调整浏览器窗口大小时，可以通过监听resize事件来获取新的窗口尺寸：

window.addEventListener('resize', function() {
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    console.log("窗口尺寸变化 - 宽度: " + newWidth + "px, 高度: " + newHeight + "px");
});

以上代码会在用户调整浏览器窗口大小时，实时输出新的窗口宽度和高度。