按摩椅浏览器测试浏览器可视窗口大小
最近有點秀逗，以前的知識突然發現有些“印象派”了，今天趕緊補上。
這個測試報告其實是關于屏幕大小、可見區域大小及頁面大小等相似概念的一個比較，看到網上有很多類似的文章，但是大多是轉來轉去，難免出現紕漏，甚至是自相矛盾，這里還是用事實說話，將各個相關方法的測試結果比較如下。
測試環境：1、本機分辨率：1280*800
?? 2、測試瀏覽器：IE6/7 (IETester)
? IE8
?????????????????????????????????????????FF3.6
? Chrome5.0
??Safari 4.0
??????? Opera 10.5
?
測試說明：
1、本次測試均針對各瀏覽器通用的方法，對于一些各自瀏覽器特有的，諸如FF的innerWidth/innerHeight/scrollMaxX/scrollMaxY本文并不涉及。
2、測試中的body樣式為
body
{
margin: 0px;
padding: 0px;
width: 1000px;
height:1000px;
}
當然根據測試需要會進行width和height的相關調整
3、測試中頁面內容的填充采用了空div的形式，HTML如下：
<div style="width:2000px;height:2000px;"></div>
? 當然根據測試需要會進行width和height的相關調整
?
測試項目
1、獲取顯示器大小（貌似這個不用測啊，寫著放著吧^_^）
alert(window.screen.width);
alert(window.screen.height);
????? 測試結果：結果均與本機分辨率一致，和瀏覽器無關。
?
------------------------------------------------------------------------------------------------------------------------------
?
2、瀏覽器可視窗口大小
alert(document.documentElement.clientWidth);???//FF 1263? IE 1259? 。。。
alert(document.documentElement.clientHeight);?? //FF 572? IE 609?? 。。。
?
為了省點紙，表示個意思好了，以FF為例，效果如下：
????
???? 測試結果：如上所示，所有瀏覽器測試結果均為標識區域，因為瀏覽器的設計和工具使用問題，數值有所不同，但其寬高只會隨瀏覽器窗口大小變化而變化。
?
------------------------------------------------------------------------------------------------------------------------------
?
3、頁面大小
? alert(document.body.clientWidth);
alert(document.body.clientHeight);
? ??
這個測試由于涉及到了頁面，也就需要考慮頁面整體(body)和頁面內容的相關影響，故下面的測試不采用空div的形式，大家可以自行填充內容測試，且隨測試調整，例如：
代碼 1 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容<br />
2 內容<br />
3 內容<br />
4 內容<br />
5 內容<br />
6 內容<br />
7 內容<br />
8 內容<br />
9 內容<br />
10 內容<br />
11 內容<br />
12 內容<br />
13 內容<br />
14 內容<br />
15 內容<br />
16 內容<br />
17 內容<br />
18 內容<br />
19 內容<br />
20 內容<br />
21 內容<br />
22 內容<br />
23 內容<br />
24 內容<br />
25 內容<br />
26 內容<br />
27 內容<br />
28 內容<br />
29 內容<br />
30 內容<br />
31 內容<br />
32 內容<br />
33 內容<br />
34 內容<br />
35 內容<br />
?
?
當有body樣式有內容時：
?
??????????????????? body樣式比可見區域(即document.documetnElement.clientWidth/clientHeight中得到的數值，下同)小，如500px 500px，且頁面內容沒有超過可見區域時：
????? 結果：所得值均與樣式中設置的值一致
?
? ??????? body樣式比可見區域小，且頁面內容溢出時：
? 結果：非IE6測試結果依然與body所設樣式值一致，而IE6只有寬度與設置的值一致，而高度為可見區域高度+頁面溢出內容的高度
?
body樣式設置的比可見區域大時，如2000px 2000px時：
結果：所得值均與樣式中設置的值一致
?
?? 有body樣式無內容時：
?? 結果：不管body樣式設置的值比可見區域大或者小，結果均為body樣式中設置的值。
? ?無body樣式有內容時：
???結果：所得寬度為頁面可見區域寬度，不受內容影響，而高度則隨內容高度的變化而變化。
?
?? 無body樣式無div時：
?? 結果：所得寬度為頁面可見區域寬度，但所得高度始終為0，因為當前頁面沒有任何內容。
?
------------------------------------------------------------------------------------------------------------------------------
?
? 4、documentElement滾動偏移測試
alert(document.documentElement.scrollWidth)
alert(document.documentElement.scrollHeight)
?
? ????這個同樣會受到樣式的影響，所以分類測試如下：
?
有body樣式有div時：
?
? body樣式設置的值比可見區域小(如 200px 200px)，且頁面內容沒有溢出時：?
結果： IE8、FF：與可見區域寬高值一致
???????????????????? Opera、Chrome、Safari：寬度為可見區域寬度，高度為頁面內容高度
???????????????????? IE6、7寬度受樣式影響（此時為200），高度為頁面內容高度
?
body樣式設置的值比可見區域小(如 200px 200px)，且頁面內容溢出時：
結果： 非IE6/7 ：寬度為可見區域寬度，高度為可見區域高度+溢出內容的高度
?????????????????????IE6/7：寬高均受樣式影響，寬度為200，高度為內容高度
body樣式設置的比可見區域大時，如2000px 2000px時：
結果：所得值均與樣式中設置的值一致
?
? 有body樣式無內容時：
? ?
body樣式設置的比可見區域大，如2000px 2000px時：
結果：所得值均與樣式中設置的值一致
body樣式設置的值比可見區域小(如 200px 200px)時：
結果：?? IE8、FF：結果與可見區域值一致
Opera、Chrome、Safari：所得寬度為可見區域寬度，高度為所設置的樣式高度(200px)
IE6、7：高寬均受樣式影響，結果為 200px 200px
?
無body樣式有內容時：
?
? 頁面內容溢出時：
? 結果：所得寬度與可見區域寬度值一致，而高度則隨頁面內容高度變化而變化。
?
?????????????????? 頁面內容沒有溢出時：
? 結果：IE8 、FF：所得值依然與可見區域值一致
Opera、Chrome、Safari?、IE6、7：所得寬度為可見區域，而高度則隨頁面內容高度變化而變化。?
?
無body樣式無內容時：
? 結果：IE6、7、8、FF：所得結果與可見區域內容一致?
Opera、Chrome、Safari：所的結果中寬度與可見區域寬度一致，而高度則為0
?
------------------------------------------------------------------------------------------------------------------------------
?
5、body滾動偏移測試：
alert(document.body.scrollWidth)
alert(document. body.scrollHeight)
?
? ????這個同樣會受到樣式的影響，所以分類測試如下：
?
有body樣式有內容時：
? body樣式設置的值比可見區域小(如200px 200px)，且頁面內容溢出時：?
結果：IE 6、7、8??：寬為200px?、高度隨內容高度的變化而變化
?? Chrome safari?：寬度為可見區域寬度，高度隨內容高度的變化而變化
?? Opera?、FF ：結果與樣式值一致 200px 200px
?
?????????????????body樣式設置的值比可見區域小(如200px 200px)，且頁面內容沒有溢出時：????????????????????
結果：IE6、7、8、FF?：寬度為200，高度隨內容高度的變化而變化
?? Chrome、Safari：所得結果均與可見區域寬高一樣
?????????????????????????Opera、FF：結果與樣式值一致 200px 200px
?
?????????????????body樣式設置的值比可見區域大時：
結果：所得值均與樣式中設置的值一致?
???
? 有body樣式無內容時：
?
body樣式設置的值比可見區域小(如200px 200px時：
?? 結果：IE6、7、8?、Opera 、FF?：所得結果均與所設樣式值一致
? Chrome?、Safari：所得結果與可見區域值一致
?
無body樣式，內容溢出時：
??? 結果：寬度為可見區域寬度，高度隨內容高度的變化而變化?
無body樣式，內容沒有溢出時：
結果： IE6、7、8? Opera、FF?：寬度為可見區域寬度，高度隨內容高度的變化而變化?
?????????????????? Chrome、Safari：所得結果為可見區域寬高度
?
無body樣式無內容時：
? 結果：Chrome 、Safari：? 所得結果為可見區域寬高度
IE6、7、8? Opera、FF?：寬度為可見區域寬度，高度為0
?
------------------------------------------------------------------------------------------------------------------------------
?
弱弱的問一句，你暈了嗎？如果你沒暈的話，那恭喜你，其實我自己都很暈。。。所以如果測試中有錯誤的地方還望能夠指出。。。
相信作為開發人員，恨不得人人都只用一種瀏覽器，但這并不現實，所以有了這么多比較，但比較并不是目的，目的是找出共性，方便我們更好的解決問題，
個人愚見：
1、在測試中考慮的一些情況貌似在實際中也沒有什么參考價值，因為相信我們在實際開發中不會把body的寬高固定，介于此我們大可不必管body樣式的影響，而且不同瀏覽器因為body的樣式的關系，所得的最終結果也會有很大差異，；
2、window.screen.width/height針對本機屏幕的分辨率，因此使用價值不大；
3、document.documentElement.clientWidth/clientHeight通用性較強，如需要控制頁面元素居中，防止頁面內容溢出產生滾動條，都應該考慮使用其判斷元素位置；
4、document.documentElement.scrollWidth/scrollHeight的測試結果各種瀏覽器的差異很大，因此參考價值不大；
????5、document.body.clientWidth/clientHeight及document.body.scrollWidth/scrollHeight：這個的使用應該看頁面的具體情況，而且暫時沒有想到可以完全兼容各個瀏覽器的方法，哎。。。瀏覽器的兼容真是頭疼。
?
不管你暈沒暈，到此為止吧，歡迎拍磚。。。
總結
以上是生活随笔為你收集整理的按摩椅浏览器测试浏览器可视窗口大小的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 超级连续的图片滚动特效
- 下一篇： Html 进行DOM 操作(放缩,颜色.