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

先来看这样一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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-inner-outer

browser-size-inner

browser-size-client

browser-size-client-body

我们可以得出结论：

  • 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要高。

兼容性

document.documentElement几乎每个浏览器都兼容；window.outerWidth和window.innerWidthIE8及以下都不支持；document.body和clientWidthIE6之前不支持。

总结

获取浏览器当前窗口大小，一般用window.innerWidth(innerHeight)就好了，但如果不兼容，则次之用document.documentElement.clientWidth(clientHeight)，再不行就只能用document.body获取了。

前面提到的getBrowserSize()方法就是使用了这种理念。

参考资料:
documentElement
innerWidth
outerWidth
document.body
clientWidth
《JavaScriptDOM高级程序设计》