教你如何获取浏览器窗口大小

125次阅读

共计 1357 个字符，预计需要花费 4 分钟才能阅读完成。

我们经常会遇到这样的需求：获取当前浏览器窗口大小，然后根据其大小来对页面进行样式设计。那么怎么去获取呢？

源代码

先来看这样一段代码：

function getBrowserSize() {
  var de = document.documentElement;
  return {
    'width': (
      window.innerWidth
      || de && de.clientWidth
      || document.body.clientWidth
    ),
    'height': (
      window.innerHeight
      || de && de.clientHeight
      || document.body.clientHeight
    )
  };
}

这段代码就是用来获取浏览器窗口大小的，我们来看看其中用到的一些知识点。

documentElement:document.documentElement获取的是页面中的 <html> 元素，也就相当于整个页面。
innerWidth&&innerHeight: innerWidth 获取的是可视区域的宽度，但包括垂直滚动条；innerHeight 则只包括可视区域高度，不包括功能框之类的。相比较之下，outerWidth 和 outerHeight 则包含整个窗口的高度，包括功能框、滚动条之类的。
document.body: 获取页面中 body 元素。
Element.clientWidth: 获取元素的可视宽度（高度），它包括 padding 但不包括滚动条、border和margin。

实际测试

经过浏览器测试得出结论：

window.innerWidth和 window.outerWidth 基本是一样的，因为 innerWidth 也包括了滚动条，但如果侧面有功能栏的话，innerWidth 就会比 outerWidth 小；window.innerHeight和 window.outerHeight 差别较大，因为下面有调试栏。
document.documentElement.clientWidth(clientHeight)获取的就是页面的可视窗口宽高，不包括滚动条和功能栏之类的。
document.body.clientWidth(clientHeight)获取的是 body 元素的宽高，不包括滚动条，但因为 body 的内容高度有 465px，所以比 document.documentElement.clientHeight 要高。