js 时刻获取当前窗口大小

在JavaScript中，获取当前窗口大小是一个常见的需求，尤其是在开发响应式网页或需要动态调整布局的应用时。以下是一些基础概念和相关方法：

基础概念

窗口大小：指的是浏览器窗口的宽度和高度，不包括浏览器的工具栏、滚动条等。
视口（Viewport）：是用户在浏览器中实际看到的页面区域。

获取窗口大小的方法

JavaScript提供了多种方法来获取窗口的大小，主要包括以下几种：

1. 使用 `window.innerWidth` 和 `window.innerHeight`

这两个属性返回浏览器窗口的内部宽度和高度（以像素为单位），包括滚动条。

let width = window.innerWidth;
let height = window.innerHeight;
console.log(`Window size: ${width} x ${height}`);

2. 使用 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`

这两个属性返回文档元素的可见部分的宽度和高度，不包括滚动条。

let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
console.log(`Document visible size: ${width} x ${height}`);

3. 使用 `window.screen.width` 和 `window.screen.height`

这两个属性返回屏幕的宽度和高度，而不是浏览器窗口的大小。

let screenWidth = window.screen.width;
let screenHeight = window.screen.height;
console.log(`Screen size: ${screenWidth} x ${screenHeight}`);

应用场景

响应式设计：根据窗口大小调整布局和样式。
动态内容加载：根据窗口大小决定加载多少内容。
游戏开发：调整游戏界面以适应不同屏幕尺寸。

遇到的问题及解决方法

问题1：窗口大小变化时如何实时获取新值？

可以使用 resize 事件监听窗口大小的变化，并在回调函数中获取新的窗口大小。

window.addEventListener('resize', () => {
    let width = window.innerWidth;
    let height = window.innerHeight;
    console.log(`Window resized to: ${width} x ${height}`);
});

问题2：跨浏览器兼容性问题

不同浏览器可能会有不同的实现方式，特别是在旧版本的IE中。可以使用以下兼容性代码：

function getWindowSize() {
    let width, height;
    if (typeof window.innerWidth !== 'undefined') {
        // 现代浏览器
        width = window.innerWidth;
        height = window.innerHeight;
    } else if (typeof document.documentElement !== 'undefined' && typeof document.documentElement.clientWidth !== 'undefined' && document.documentElement.clientWidth !== 0) {
        // IE6+ 在标准模式下
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    } else {
        // 旧版本的IE
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
    return { width, height };
}

console.log(`Window size: ${getWindowSize().width} x ${getWindowSize().height}`);

通过这些方法，可以有效地获取和处理窗口大小的变化，确保应用在不同设备和浏览器上都能正常运行。