小结js屏幕、浏览器、页面大小

快放假过年了，公司最近也不忙，都在打酱油，趁这几天闲下来的时间，整理巩固一下相关疑问点，一直以来，对于js获取网页上的各种窗口大小，一直没有非常明确的理解和记忆，很多时候都是度娘和谷哥来解决，这次花了两天时间，在五种浏览器下分别进行了测试调试（分别是：IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1），整理自己的理解。本文地址：http://www.cnblogs.com/vnii/archive/2012/01/13/2320842.html声明：一下结论均是在标准模式 下的测试结果，且测试浏览器分别为Windows7 下的IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1，以下为书写方便，分别描述为IE、Chrome、FireFox、Opera、Safari，不写版本号。测试HTML

测试

1
2
3
4
5
6
7
8
9
10



00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000测试测试测试测试测试测试测试测试测试测试测试





...... 复制代码 js代码以及对于说表示的值如下：//－－－－－－页面内容宽度、高度－－－－－－－－ alert(document.body.scrollWidth); //其中IE Firefox Opera：不识别绝对定位absolute的宽度，仅表示“非绝对定位”内容的宽度，且当浏览器可用宽度>“非绝对定位”内容宽度时候，表示的和offsetWidth相同，即＝浏览器可用宽度-body的margin值-滚动条宽度 //其中Chrome Safari：页面内所有内容的宽度，且当浏览器宽度>所有内容宽度时候，表示的宽度为＝浏览器可用宽度-滚动条宽度 alert(document.body.scrollHeight); //IE Firefox Opera：不识别绝对定位absolute的容器高度，仅表示页面内“非绝对定位”内容的高度； //Chrome Safari：页面内所有内容的高度，且当浏览器可用高度>所有内容高度时候，表示为浏览器高度//[Begin新增 2012.1.16 14:40]//此处结合上面的body.scrollXxx就可以给出 整个网页的大小=Max(document.body.scrollXxx,document.documentElement.scrollXxx)//－－－－－－网页文档对象宽度、高度－－－－－－－－ alert(document.documentElement.scrollWidth); //IE Firefox Opera：页面内所有内容的宽度，且当浏览器宽度>所有内容宽度时候，表示的宽度为＝浏览器可用宽度-滚动条宽度 //Chrome Safari：不识别绝对定位absolute的宽度，仅表示“非绝对定位”内容的宽度，且当浏览器可用宽度>“非绝对定位”内容宽度时候，表示宽度＝浏览器可用宽度-滚动条宽度 alert(document.documentElement.scrollHeight); //IE Firefox Opera：页面内所有内容的高度，且当浏览器可用高度>所有内容高度时候，表示为浏览器高度 //Chrome Safari：不识别绝对定位absolute的容器高度，仅表示页面内“非绝对定位”内容的高度；//[End新增]//－－－－－－页面内容宽度、高度－－－－－－－－ alert(document.body.offsetWidth); //页面内容宽度=浏览器可用宽度-body的margin值-滚动条宽度，其中滚动条没有时表示0 alert(document.body.offsetHeight); //页面内容高度，均不识别绝对定位absolute的容器高度，仅表示页面内“非绝对定位”内容的高度//－－－－－－浏览器内容可见区域大小－－－－－－－－ alert(document.documentElement.clientWidth); //浏览器内容可见区域宽度-滚动条宽度 alert(document.documentElement.clientHeight); //浏览器内容可见区域高度-滚动条宽度//－－－－－－滚动条偏离大小－－－－－－－－ alert(document.body.scrollTop); //Chrome Firefox Safari Opera支持，滚动条滚动的高度 alert(document.body.scrollLeft); //Chrome Firefox Safari Opera支持，滚动条滚动的左右位移 alert(document.documentElement.scrollTop); //IE支持，滚动条滚动的高度 alert(document.documentElement.scrollLeft); //IE支持，滚动条滚动的左右位移//－－－－－－浏览器可用区域大小－－－－－－－－ alert(window.innerWidth); alert(window.innerHeight); //ie:浏览器可用区域大小，滚动条无影响 [修正 2012.1.16 15:15](IE8 以及以前 都不支持，结果为undefined) //Chrome Firefox Safari Opera：浏览器可用区域大小，滚动条无影响//－－－－－－屏幕大小－－－－－－－－ alert(window.screen.availWidth); alert(window.screen.availHeight); //当前屏幕大小(可用区域),window.screen.height减去任务栏等所占的大小//－－－－－－屏幕大小－－－－－－－－ alert(window.screen.width); alert(window.screen.height); //当前屏幕大小(分辨率值) 复制代码 本来打算画个图来说明的，发现ps没装。。。其它的图片处理工具也不太好画，所以暂时就以上面的文字描述为主，后续有时间再画个图上传进行说明。以上有不同结果或者描述补充的，请大家不吝指教。。。