瀏覽器幾種高度寬度


最近在做一個類似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:如何獲得瀏覽器工具欄以下狀態欄以上部分的高度,因為不同瀏覽器高度不同,我也總不能手工測量下吧?還有就是調整窗口大小后如何得到此時窗口的實際寬度?

哪位如果有解決方法,希望說下,先謝了

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM