js 获取屏幕大小

在JavaScript中，获取屏幕大小通常指的是获取浏览器窗口的可视区域尺寸，这可以通过window.innerWidth和window.innerHeight属性来实现。这两个属性分别表示浏览器窗口的宽度和高度，包括滚动条（如果存在的话）。

以下是一个简单的示例代码，展示如何获取并打印屏幕大小：

// 获取浏览器窗口的宽度和高度
var width = window.innerWidth;
var height = window.innerHeight;

console.log("窗口宽度: " + width + "px");
console.log("窗口高度: " + height + "px");

此外，如果你想获取整个屏幕的分辨率，而不是浏览器窗口的大小，可以使用screen.width和screen.height属性：

// 获取屏幕的宽度和高度
var screenWidth = screen.width;
var screenHeight = screen.height;

console.log("屏幕宽度: " + screenWidth + "px");
console.log("屏幕高度: " + screenHeight + "px");

需要注意的是，window.innerWidth和window.innerHeight获取的是浏览器窗口的可视区域尺寸，不包括工具栏、菜单栏、滚动条等。而screen.width和screen.height获取的是整个屏幕的分辨率。

在实际应用中，获取屏幕大小常用于响应式设计，以便根据不同的屏幕尺寸调整页面布局或者执行特定的逻辑。

如果你遇到了问题，比如获取的尺寸不符合预期，可能的原因有：

1. 浏览器的缩放设置：用户可能缩放了浏览器窗口，这会影响window.innerWidth和window.innerHeight的值。
2. 浏览器兼容性：虽然现代浏览器普遍支持上述属性，但在一些老旧的浏览器中可能会有兼容性问题。
3. 移动设备：在移动设备上，屏幕尺寸可能会因为设备方向（横屏或竖屏）的改变而变化。

解决方法：

• 对于浏览器缩放问题，可以在页面加载时监听resize事件，当窗口尺寸发生变化时重新获取尺寸。
• 对于浏览器兼容性问题，可以使用特性检测来确保代码只在支持这些属性的浏览器中执行。
• 对于移动设备，可以监听orientationchange事件来处理屏幕方向变化时的尺寸调整。

示例代码：

function updateSize() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    console.log("当前窗口宽度: " + width + "px");
    console.log("当前窗口高度: " + height + "px");
}

// 页面加载时获取尺寸
updateSize();

// 监听窗口尺寸变化
window.addEventListener('resize', updateSize);

// 监听移动设备方向变化
window.addEventListener('orientationchange', updateSize);

通过这种方式，你可以确保无论用户如何改变浏览器窗口大小或设备方向，都能够获取到最新的屏幕尺寸信息。