小结js屏幕、浏览器、页面大小
快放假过年了，公司最近也不忙，都在打酱油，趁这几天闲下来的时间，整理巩固一下相关疑问点，一直以来，对于js获取网页上的各种窗口大小，一直没有非常明确的理解和记忆，很多时候都是度娘和谷哥来解决，这次花了两天时间，在五种浏览器下分别进行了测试调试（分别是：IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1），整理自己的理解。
本文地址：http://www.cnblogs.com/vnii/archive/2012/01/13/2320842.html
声明：一下结论均是在标准模式<!DOCTYPE HTML> 下的测试结果，且测试浏览器分别为Windows7 下的IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1，以下为书写方便，分别描述为IE、Chrome、FireFox、Opera、Safari，不写版本号。
测试HTML
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Browser Size Test</TITLE>
<style>
body div{
position:absolute;
border:solid 1px #ff0000;
width:1500px;
height:1500px;
filter:alpha(Opacity=80);
-moz-opacity:0.5;opacity: 0.5;z-index:100;
}
</style>
</HEAD>
<BODY>
<div>测试</div>
<br/>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>
<br/>
<br/>
<br/>00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000测试测试测试测试测试测试测试测试测试测试测试
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>......
</BODY>
</HTML>
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没装。。。其它的图片处理工具也不太好画，所以暂时就以上面的文字描述为主，后续有时间再画个图上传进行说明。
以上有不同结果或者描述补充的，请大家不吝指教。。。
