获取浏览器窗口大小的方法主要有四种，适用于不同场景。1.window.innerwidth 和 innerheight 兼容性好，适用于大多数情况；2.document.documentelement.clientwidth 和 clientheight 用于标准模式；3.document.body.clientwidth 和 clientheight 用于怪异模式；4.screen.width 和 screen.height 获取屏幕分辨率，较少使用。在移动端，window.innerwidth 可能受虚拟键盘影响，可通过监听 resize 事件并重新计算窗口大小来解决。document.documentelement 指的是标签，在标准模式下使用；document.body 指的是
标签，在怪异模式下使用。为兼容性考虑，可结合两者获取窗口大小。频繁触发 resize 事件可通过防抖或节流技术优化性能，防抖适合延迟执行，节流适合固定间隔执行。
获取浏览器窗口大小，简单来说，就是拿到浏览器可视区域的宽度和高度。这在前端开发中非常常见，比如响应式布局、动态调整元素大小等等。
获取浏览器窗口大小的方法主要有以下几种，各有特点，适用场景也略有不同：
// 方法一：使用 window.innerWidth 和 window.innerHeight (兼容性好) const width = window.innerWidth; const height = window.innerHeight; // 方法二：使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight (标准模式) const width = document.documentElement.clientWidth; const height = document.documentElement.clientHeight; // 方法三：使用 document.body.clientWidth 和 document.body.clientHeight (怪异模式) const width = document.body.clientWidth; const height = document.body.clientHeight; // 方法四：使用 screen.width 和 screen.height (获取屏幕分辨率，不常用) const width = screen.width; const height = screen.height;
解决方案
具体选择哪种方法，取决于你的需求和兼容性考虑。通常情况下，window.innerWidth 和 window.innerHeight 已经足够满足大部分场景，而且兼容性也非常好。如果需要兼容一些老旧浏览器，可以考虑结合 document.documentElement.clientWidth 和 document.body.clientWidth 来处理。
为什么window.innerWidth在移动端有时不准确？
在移动端，尤其是iOS设备上，window.innerWidth 可能会受到虚拟键盘的影响。当虚拟键盘弹出时，window.innerWidth 的值可能会减小，因为浏览器认为可视区域变小了。解决这个问题，可以考虑监听 resize 事件，并在事件处理函数中重新计算窗口大小。
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
console.log(`窗口大小改变：宽度 ${width}，高度 ${height}`);
});
另外，某些移动浏览器可能会存在一些特殊的行为，例如在地址栏隐藏或显示时，window.innerWidth 的值也会发生变化。因此，在处理移动端窗口大小问题时，需要进行充分的测试和兼容性处理。
document.documentElement 和 document.body 的区别是什么？什么时候使用它们？
document.documentElement 指的是文档的根元素，也就是 标签。而 document.body 指的是
标签。
在标准模式下（也就是文档声明 存在的情况下），document.documentElement.clientWidth 和 document.documentElement.clientHeight 能够正确获取浏览器窗口的大小。
而在怪异模式下（文档声明缺失或不正确的情况下），document.body.clientWidth 和 document.body.clientHeight 才能正确获取浏览器窗口的大小。
因此，为了保证兼容性，通常会结合这两种方式来获取窗口大小：
function getWindowWidth() {
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
function getWindowHeight() {
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
const width = getWindowWidth();
const height = getWindowHeight();
如何避免频繁触发 resize 事件？
监听 resize 事件虽然可以实时获取窗口大小的变化，但如果窗口大小变化过于频繁，会导致 resize 事件处理函数被频繁调用，影响性能。
为了避免这种情况，可以使用 防抖（debounce） 或 节流（throttle） 技术。
防抖 是指在事件被触发后，延迟一段时间后再执行事件处理函数。如果在延迟时间内再次触发该事件，则重新计时。也就是说，只有在事件停止触发一段时间后，才会执行事件处理函数。
节流 是指在一段时间内，只允许事件处理函数执行一次。也就是说，无论事件触发多么频繁，都只会按照固定的时间间隔执行事件处理函数。
以下是一个使用防抖的例子：
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
const handleResize = () => {
const width = window.innerWidth;
const height = window.innerHeight;
console.log(`窗口大小改变：宽度 ${width}，高度 ${height}`);
};
const debouncedHandleResize = debounce(handleResize, 200); // 延迟 200 毫秒
window.addEventListener('resize', debouncedHandleResize);
在这个例子中，debounce 函数接受一个函数和一个延迟时间作为参数，并返回一个新的函数。这个新的函数会在事件被触发后，延迟 200 毫秒再执行。如果在延迟时间内再次触发该事件，则重新计时。
通过使用防抖或节流技术，可以有效地减少 resize 事件处理函数的调用次数，提高性能。选择防抖还是节流，取决于你的具体需求。如果希望在事件停止触发一段时间后执行，则选择防抖；如果希望按照固定的时间间隔执行，则选择节流。
暂无评论内容