瀏覽器幾種高度寬度

 

轉載（http://www.cnblogs.com/heaventear/archive/2013/04/05/3000364.html）

其餘：http://www.cnblogs.com/EricaMIN1987_IT/p/3593431.html

最近在作一個相似windows鼠標右鍵彈出菜單的東西，用到了瀏覽器相關的寬度和高度的東西，因而系統的看了下。內心有了大體瞭解，但仍是有些小問題。

個人電腦，14寸，分辨率1366*768。測試瀏覽器ie9,chrome,firefox。

網頁可見區域寬：document.body.clientWidth 
網頁可見區域高：document.body.clientHeight 

　　寬度隨着瀏覽器窗口的調整而變化，是咱們可見的窗口區域寬度。最大1347，最小三種瀏覽器各不相同。

　　高度隨着瀏覽器窗口的調整固定不變，是窗口區域全部文檔的高度。chrome和firefox大小相同，ie9比之高了24px。

 

網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 
網頁可見區域高：document.body.offsetHeight (包括邊線的寬) 

　　offsetWdith和offsetHeight比上邊的多了邊線的寬度，別的如出一轍。

 

網頁正文全文寬：document.body.scrollWidth 
網頁正文全文高：document.body.scrollHeight 

　　對於ie9和chrome，寬度是窗口區域全部文檔的寬度，和窗口大小無關。而firefox，寬度隨着窗口的改變而改變，最大等於clentWidth。

　　高度隨着瀏覽器窗口的調整固定不變，是窗口區域全部文檔的高度。chrome比firefox高2px，ie9比chrome高了22px。

 

網頁被捲去的高：document.body.scrollTop 
網頁被捲去的左：document.body.scrollLeft 

　　對chrome來講是網頁被捲上去的高度，即滾動條下拉時上去的網頁部分。ie9和firefox一直爲0。

　　寬度同高度相似，只有chrome有值。

 

網頁正文部分上：window.screenTop 
網頁正文部分左：window.screenLeft 

　　對於ie9來講是網頁正文部分上邊的高度，即菜單欄工具欄等，55px。chrome爲0，firefox是undefined.

　　對ie9和chrome來講，寬度都是0。firefox是undefined。

 

屏幕分辨率的高：window.screen.height 
屏幕分辨率的寬：window.screen.width 

　　三個瀏覽器同樣，都是1366*768.

 

屏幕可用工做區高度：window.screen.availHeight 
屏幕可用工做區寬度：window.screen.availWidth

　　三個瀏覽器都同樣，高度728px，寬度1366px。768-728=40px，說明狀態欄的高度爲40px。

 

總結完畢。

問題1：在firefox中如何得到相似chrome和ie9中scrollWidth的值？由於firefox中scrollWidth至多等於clientWidth的值。

問題2：如何得到瀏覽器工具欄如下狀態欄以上部分的高度，由於不一樣瀏覽器高度不一樣，我也總不能手工測量下吧？還有就是調整窗口大小後如何獲得此時窗口的實際寬度？

哪位若是有解決方法，但願說下，先謝了