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

最新推荐文章于 2024-03-26 23:03:57 发布

chimeiyan8610

最新推荐文章于 2024-03-26 23:03:57 发布

阅读量208

点赞数

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/u/3270404/blog/866081

版权

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

二、测试办法

Java代码

收藏代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="MobileOptimized" content="320">
<title>Document</title>
<style type="text/css">
.test
{
width:100px;
height:100px;
background:red;
}
#data
{
width:200px;
height:100px;
}
</style>
</head>
<body>
<div class="test">test</div>
<div id="data"></div>
<script type="text/javascript">
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var data = document.getElementById('data');
data.innerHTML = "正常文档流情况："+"<br/>";
data.innerHTML += "h="+h+"<br/>";
data.innerHTML += "w="+w+"<br/>";
data.innerHTML += "document.body.clientHeight="+document.body.clientHeight+"<br/>";
data.innerHTML += "document.body.clientWidth="+document.body.clientWidth+"<br/>";
data.innerHTML += "window.innerWidth="+window.innerWidth+"<br/>";
data.innerHTML += "window.innerHeight="+window.innerHeight+"<br/>";
data.innerHTML += "document.documentElement.clientHeight="+document.documentElement.clientHeight+"<br/>";
data.innerHTML += "document.documentElement.clientWidth="+document.documentElement.clientWidth+"<br/>";
</script>
</body>
</html>

结果（例子）：
正常文档流情况：
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，向显示在移动端怎么办？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

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才能得到正确的结果。

转载于:https://my.oschina.net/u/3270404/blog/866081

chimeiyan8610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.body、document.documentElement和window获取视窗大小的区别

2015-3-27 $(window).height(); 才是窗口的宽高，而且一直不变 document.body.clientHeight，在文档内容有滚动条的时候远大于$(window).height(); 实际例子，向下滑动判断 $(document).height() - $(w...
复制链接

扫一扫