JS取得各種瀏覽器視窗大小的方法_javascript技巧

常用:
JS 取得瀏覽器視窗大小

複製程式碼

🎜> 程式碼如下:

// 取得視窗寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if((document.body) &if(doc) document.body.clientWidth))
winWidth = document.body.clientWidth;
// 取得視窗高度
if (window.innerHeight)
winHeight = window.innerHeight; (document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 透過深入Document 內部對body 進行偵測，取得視窗大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientHeight;
winWidth = document.documentElement.clientHeight;
winWidth = document.documentElement.Widid; 🎜>

詳細:
關於取得各種瀏覽器可見視窗大小: <script> </script>function getInfo()
{
var s = "";
s = " 網頁可見區域寬：" document.body.clientWidth;
s = " 網頁可見區域高：" document.body.clientHeight;
s = " 網頁可見區域寬：" document.body.offsetWidth " (包括邊線和捲軸的寬)";
s = " 網頁可見區域高：" 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 = " 螢幕可用工作區高度：" window.screen.availHeight;
s = " 螢幕可用工作區寬度：" window.screen.availWidth;

s = " 你的螢幕設定是" window.screen.colorDepth " 位元彩色"; s = " 你的螢幕設定" window.screen.deviceXDPI " 像素/英吋";

//alert (s);
}
getInfo();


在我本地測試當中：
在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的標準在作怪啊

如果在頁面中加入這行標記的話在IE中：

document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度物件寬度document.body.clientHeight ==> BODY物件高度物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

在FireFox中：
document.body.clientWidth ==> BODY物件寬度document.body.clientHeight ==> BODY物件高度
docum.document.body.clientHeight ==> BODY物件高度
docum.document.body.clientHeight ==> BODY物件高度
docum.document. => 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

 

在Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.document.body.clientHeight ==>可見區域高度
document.document.body.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 ==> 頁面物件高度（即「即」物件高度（即Margin對象高度加上Margin高）
Opera為：

document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面物件高度（即即BODY對象高度加上Margin高）