js獲取視窗大小

2022-07-12 14:03:25 字數 2216 閱讀 6585

常用:

js 獲取瀏覽器視窗大小

// 獲取視窗寬度

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 獲取瀏覽器視窗大小 獲取視窗寬度 if window.innerwidth winwidth window.innerwidth else if document.body document.body.clientwidth winwidth document.body.clientwi...

js獲取視窗大小高度

document.body.clientwidth body文件區域的寬度 document.body.clientheight body文件區域的高度 document.body.offsetwidth body文件區域的寬度 包括邊線 document.body.offsetheight bod...

獲取視窗大小

getclientrect 以視窗客戶區左上角為基準。getwindowrect 以螢幕左上角為基準。getwindowrect screentoclient getclientrect getclientrect clienttoscreen getwindowrect mapwindowpoin...