我们经常会遇到这样的需求：获取当前浏览器窗口大小，然后根据其大小来对页面进行样式设计。那么怎么去获取呢？
源代码
先来看这样一段代码：
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要高。
兼容性
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高级程序设计》
评论 (0)