js获取window宽度

基础概念

在JavaScript中，window对象代表了浏览器窗口。获取窗口宽度通常指的是获取浏览器窗口的视口（viewport）宽度，即用户在浏览器中可见的页面区域宽度。

类型与应用场景

获取视口宽度：适用于需要在不同屏幕尺寸下调整页面布局的场景。
监听窗口大小变化：适用于需要在窗口大小改变时动态调整页面内容的场景。

示例代码

获取当前窗口宽度

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log("当前窗口宽度是：" + width + "px");

监听窗口大小变化

window.addEventListener('resize', function() {
    let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    console.log("窗口宽度变为：" + width + "px");
});

可能遇到的问题及解决方法

问题：获取的宽度不准确

原因：

浏览器兼容性问题。
页面尚未完全加载时执行获取宽度的代码。

解决方法：

使用window.innerWidth作为首选方法，因为它在大多数现代浏览器中都能提供准确的视口宽度。
确保在页面加载完成后执行相关代码，可以使用window.onload事件或者将脚本放在页面底部。

window.onload = function() {
    let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    console.log("页面加载完成后的窗口宽度是：" + width + "px");
};

问题：监听窗口大小变化时性能问题

原因：

频繁触发resize事件可能导致性能问题。

解决方法：

使用防抖（debounce）或节流（throttle）技术来减少事件处理函数的调用频率。

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

window.addEventListener('resize', debounce(function() {
    let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    console.log("窗口宽度变为：" + width + "px");
}, 100));

通过上述方法，可以有效解决获取窗口宽度时可能遇到的问题，并优化用户体验。