1.浏览器可视窗口的概述：
浏览器可视区域不是网页的body的大小。可视区指的是浏览器减去上面菜单栏、工具栏，下面状态栏和任务栏，右边滚动条（如果有的话）后的中间网页内容的单页面积大小。而body大小是随着内容调整而变动的，可大可小。如果有滚动条的话，body的要大于可视区
2.不同浏览器或版本的不同写法：
对于IE9+、Chrome、Firefox、Opera 以及 Safari(window对象属性不支持IE8及以下浏览器):
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight 表示HTML文档所在窗口的当前高度（浏览器窗口的内部高度）
document.documentElement.clientWidth 表示HTML文档所在窗口的当前宽度（浏览器窗口的内部宽度）
或者 Document对象的body属性对应HTML文档的<body>标签
document.body.clientHeight （body标签的内部高度）
document.body.clientWidth （body标签的内部宽度）
综上所述，在不同浏览器都实用的兼容性JavaScript 方案如下：
var w= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h= window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;
3. 关于兼容性的后两者的理解：
3.1 两者对象不同（前者是浏览器对象，后者是body对象），其结果也不绝对相同
3.2 在浏览器默认的情况下，body有8-10px左右的边距，而可见区域包括了这个边距，因此如果我们用到body{padding:0;margin:0;}来消除这种默认的情况。那么document.body.clientWidth和document.documentElement.clientWidth 的值就会相同。
原文地址：https://www.cnblogs.com/menglong1214/p/9418270.html