获取 <html> 标签的 clientWidth 和 clientHeight 属性，就可以知道浏览器窗口的可视宽度和高度，而 <html> 标签在脚本中表示为 document.documentElement。可以这样设计：
var w = document.documentElement.clientWidth; //返回值不包含滚动条的宽度 var h = document.documentElement.clientHeight; //返回值不包含滚动条的宽度
在怪异模式下，body 是最顶层的可视元素，而 html 元素保持隐藏，所以只有通过 <body> 标签的 clientWidth 和 clientHeight 属性才可以知道浏览器窗口的可视宽度和高度，而 <body> 标签在脚本中表示为 document.body。可以这样设计：
var w = document.body.clientWidth; var h = document.body.clientHeight;
把上面两种方法兼容起来， 设计代码如下：
var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight;
如果浏览器支持 documentElement，则使用 documentElement 对象读取；如果该对象不存在，则使用 body 对象读取。
如果窗口包含内容超出了窗口可视区域，则应该使用 scrollWidth 和 scrollHeight 属性来获取窗口的实际宽度和高度。
对于 document.documentElement 和 document.body 来说，不同浏览器对它们的支持略有差异。例如：
<body style="border : solid 2px blue; margin : 0; padding : 0">
<div style="width : 2000px; height : 1000px; border : solid 1px red;">
</div>
</body>
<script>
var wb = document.body.scrollWidth;
var hb = document.body.scrollHeight;
var wh = document.documentElement.scrollWidth;
var hh = document.documentElement.scrollHeight;
</script>
不同的浏览器使用 documentElement 对象获取浏览器窗口的实际尺寸是一致的，但是使用 body 对象来获取对应尺寸就会存在解析差异，在实际设计中应该考虑这个问题。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/23305.html