document.body、document.documentElement和window获取视窗大小的区别

阅读更多
作者:zccst

参考网址: http://www.ido321.com/906.html

2015-3-27
$(window).height(); 才是窗口的宽高,而且一直不变
document.body.clientHeight,在文档内容有滚动条的时候远大于$(window).height();

实际例子,向下滑动判断
$(document).height() - $(window).scrollTop() - $(window).height() < 150



2015-3-17

踩了一个大坑,在UC浏览器,window.innerHeight与document.body.clientHeight根本不相等,导致获取错误的高度。
结论:直接使用document.body.clientHeight即可。


另外,screen.availHight是屏幕分辨率1920x1080之类,并不是屏幕viewport尺寸。




一、理论
在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight – 浏览器窗口的内部高度
window.innerWidth – 浏览器窗口的内部宽度


对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth


二、测试办法












Document




test


结果(例子):
正常文档流情况:
h=652
w=1280
document.body.clientHeight=200
document.body.clientWidth=1264
window.innerWidth=1280
window.innerHeight=652
document.documentElement.clientHeight=652
document.documentElement.clientWidth=1280


经测试结论1:
document.body.clientWidth/Height:的宽高偏小,高甚至默认200。
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。


测试结论2:
给.test添加左浮动:float:left,让其脱离正常文档流,看看结果:除了document.body.clientHeight变成了100,其他基本保持不变。


测试结论3:
但是给.data也添加float:left,在对应的浏览器中,document.body.clientHeight变成了0,其他基本保持不变。不信可以自己试试。



三、如何使用知识来改进
1,向显示在移动端怎么办?


2,如果希望clientWidth/Height与 documentElement.clientWidth、innerWidth 一样怎么办?
设置如下css
body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}
最关键的是:body的height:100%影响document.body.clientHeight的值。
body的margin:0,padding:0影响document.body.clientWidth的值。

所以,需要js+css才能得到正确的结果。

你可能感兴趣的:(html)