JS搞定浏览器窗口尺寸，这4种方法你不得不知！

想要精准获取浏览器窗口大小？前端开发中，响应式布局和动态调整元素尺寸至关重要。本文为你详解JS获取浏览器窗口大小的四种实用方法，包括兼容性良好的`window.innerWidth`和`innerHeight`，适用于标准模式的`document.documentElement.clientWidth`和`clientHeight`，以及怪异模式下的`document.body.clientWidth`和`clientHeight`。同时，我们还探讨了移动端`window.innerWidth`不准确的原因及解决方案，以及`document.documentElement`和`document.body`的区别与应用场景。更有防抖和节流技术，助你优化`resize`事件处理，提升页面性能。掌握这些技巧，轻松应对各种窗口大小获取需求！

获取浏览器窗口大小的方法主要有四种，适用于不同场景。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 事件处理函数的调用次数，提高性能。选择防抖还是节流，取决于你的具体需求。如果希望在事件停止触发一段时间后执行，则选择防抖；如果希望按照固定的时间间隔执行，则选择节流。

今天关于《JS搞定浏览器窗口尺寸，这4种方法你不得不知！》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！