如何获取浏览器窗口的尺寸

常用的获取宽高的代码

//页面信息
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
距离上方或上层控件的位置 obj.offsetTop
距离左方或上层控件的位置 obj.offsetLeft

//浏览器信息
浏览器高度:window.outerHeight
浏览器宽度:window.outerWidth
浏览器内页面可用高度:window.innerHeight 此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。
浏览器内页面可用宽度:window.innerWidth 此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

//定位宽度信息
网页正文获取对象的滚动宽度:document.body.scrollWidth 
网页正文获取对象的滚动高度:document.body.scrollHeight 
网页被卷去的高:document.body.scrollTop 
网页被卷去的左:document.body.scrollLeft 

//屏幕信息
网页正文部分上:window.screenTop 
网页正文部分左:window.screenLeft 
屏幕分辨率的高:window.screen.height 
屏幕分辨率的宽:window.screen.width 
屏幕可用工作区高度:window.screen.availHeight 
屏幕可用工作区宽度:window.screen.availWidth

垂直方向滚动的值:document.documentElement.scrollTop

展示图

如何获取浏览器窗口的尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

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

对于 Internet Explorer 5、6、7、8:

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

总结一下通用方法,获取浏览器窗口的高度和宽度(不包括工具栏/滚动条)

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;