JavaScript获取浏览器可视区域的宽高

JavaScript获取浏览器可视区域的宽高

在做项目的时候，我们常常需要对项目做一些优化，来提升页面响应的速度，比如进入可视区域后再发送请求获取数据或者是填充模板，这个时候就需要能够获取到浏览器的可视区域的宽高：

// 获取浏览器可视区域宽高（兼容性比较好，不包括工具栏和滚动条）
var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var browserHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

对于ie浏览器的兼容性一直是令人头大的问题，ie永远是最特殊的那一个浏览器，所以你可以使用上面那种兼容性比较好的获取方法，也可以单独设置ie浏览器下获取可视区域宽高的属性：

对于 ie 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth
//或者
document.body.clientHeight
document.body.clientWidth

对于Internet Explorer9、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight; // 浏览器窗口的内部高度
window.innerWidth; // 浏览器窗口的内部宽度