JS 獲取瀏覽器視窗大小

js獲取瀏覽器視窗大小

常用:

js 獲取瀏覽器視窗大小12

3456

78910

1112

1314

1516

// 獲取視窗寬度

if (window.innerwidth)

winwidth = window.innerwidth;

else if ((document.body) && (document.body.clientwidth))

winwidth = document.body.clientwidth;

// 獲取視窗高度

if (window.innerheight)

winheight = window.innerheight;

else if ((document.body) && (document.body.clientheight))

winheight = document.body.clientheight;

// 通過深入 document 內部對 body 進行檢測，獲取視窗大小

if (document.documentelement && document.documentelement.clientheight && document.documentelement.clientwidth)

詳細:

關於獲取各種瀏覽器可見視窗大小:

在我本地測試當中：

在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.documentelement.clientwidth ==> 可見區域寬度

document.documentelement.clientheight ==> 可見區域高度

在firefox中：

document.body.clientwidth ==> body物件寬度

document.body.clientheight ==> body物件高度

document.documentelement.clientwidth ==> 可見區域寬度

document.documentelement.clientheight ==> 可見區域高度

? 在opera中：

document.body.clientwidth ==> 可見區域寬度

document.body.clientheight ==> 可見區域高度

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高）

JS 獲取瀏覽器視窗大小

JS 獲取瀏覽器視窗大小

JS 獲取瀏覽器視窗大小

JS 獲取瀏覽器視窗大小

相關推薦