快放假過年了，公司最近也不忙，都在打醬油，趁這幾天閑下來的時間，整理鞏固一下相關疑問點，一直以來，對於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沒裝。。。其它的圖片處理工具也不太好畫，所以暫時就以上面的文字描述為主，后續有時間再畫個圖上傳進行說明。
以上有不同結果或者描述補充的，請大家不吝指教。。。