浏览器几种高度宽度

 

转载（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：如何得到浏览器工具栏如下状态栏以上部分的高度，由于不一样浏览器高度不一样，我也总不能手工测量下吧？还有就是调整窗口大小后如何获得此时窗口的实际宽度？

哪位若是有解决方法，但愿说下，先谢了