關于獲取各種瀏覽器可見窗口大小的一點點研究
<script>
function getInfo()
{
var s = "";
s = " 網頁可見區(qū)域寬：" document.body.clientWidth;
s = " 網頁可見區(qū)域高：" document.body.clientHeight;
s = " 網頁可見區(qū)域寬：" document.body.offsetWidth " (包括邊線和滾動條的寬)";
s = " 網頁可見區(qū)域高：" document.body.offsetHeight " (包括邊線的寬)";
s = " 網頁正文全文寬：" document.body.scrollWidth;
s = " 網頁正文全文高：" document.body.scrollHeight;
s = " 網頁被卷去的高(ff)：" document.body.scrollTop;
s = " 網頁被卷去的高(ie)：" document.documentElement.scrollTop;
s = " 網頁被卷去的左：" document.body.scrollLeft;
s = " 網頁正文部分上：" window.screenTop;
s = " 網頁正文部分左：" window.screenLeft;
s = " 屏幕分辨率的高：" window.screen.height;
s = " 屏幕分辨率的寬：" window.screen.width;
s = " 屏幕可用工作區(qū)高度：" window.screen.availHeight;
s = " 屏幕可用工作區(qū)寬度：" window.screen.availWidth;
s = " 你的屏幕設置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕設置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在本地測試當中：
- 在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得，很簡單，很方便。
而在公司項目當中： - Opera仍然使用
document.body.clientWidth
document.body.clientHeight - 可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標準在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標記的話 在IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域寬度
document.documentElement.clientHeight ==> 可見區(qū)域高度
- 在FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域寬度
document.documentElement.clientHeight ==> 可見區(qū)域高度 - 在Opera中：
document.body.clientWidth ==> 可見區(qū)域寬度
document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
而如果沒有定義W3C的標準，則
- IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0 - FireFox為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高） - Opera為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
注：
Document 對象
當瀏覽器載入HTML 文檔，它就會成為 Document 對象。
Document對象是HTML文檔的根節(jié)點。
Document對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
通過document訪問頁面內的元素，document.documentElement返回html dom中的root 節(jié)點 即<html>，document.body返回html dom中的body節(jié)點 即<body>。
所以document.documentElement是<html></html>元素，document.body是<body></body>元素。如果發(fā)現兩個高度不一樣，是css設置的問題，你的html高度不一定高于body。
用body查看，其中clientHeight即為body的css高度
用documentElement，其中clientHeight即為html的css高度
網上很多說document.documentElement.clientHeight或者document.body.clientHeight為可見高度，其實這要看body或者html標簽的css怎么設的，當body的height（css設定）一開始就和scrollHeight相等時，是不能作為可見高度的。
