首先，我们知道document.body指向的就是body元素，如此，我们就可以以document.body来获取body的大小。何以知之？如下代码：
var body = document.querySelector('body'); console.log(body == document.body);
结果显示的是true。
同样的document.documentElement指向的是html元素。
html代码如下：
<div id = 'div' style = '200px;height: 200px;background: red;'>
</div>
如图效果：
1.获取html的大小
如下代码：
var html = document.querySelector('html');
// 获取html元素的宽度 console.log("html-" +document.defaultView.getComputedStyle(html,null).width);
// 获取html元素的高度 console.log("html-height:" + document.defaultView.getComputedStyle(html,null).height);
结果显示：html-1366px，html-height:216px
2.获取body的大小
代码如下：
console.log("clientWidth:" + document.body.clientWidth);
console.log("clientHeight:" + document.body.clientHeight);
结果显示：body-1350px，clientHeight:200。
3.使用能够window.innerWidth获取
代码如下：
console.log("innerWidth:" + window.innerWidth);
console.log('innerHeight:' + window.innerHeight);
结果显示：innerWidth:1366，innerHeight:608
从以上的实验，可以知道，使用window.innerWidth/window.innerHeight获得的绝非是有些人所说的html的大小。
首先从width来看，为什么可见window.innerWidth和html的宽度是相等的。但是问什么body的width却是比二者都小呢？
其实答案很简单，因为body天生就有margin，不信的话，我们把body染色，代码如下：
html.style.backgroundColor = 'white';
body.style.backgroundColor = 'red';
之所以第一行给了html的背景色。其深入原因请见张大神的对html与body的一些研究与理解。效果如图：
body的margin未修改：
body的margin修改后：
那么滚动条是否会对三者的宽度有什么影响呢？
假如我们使浏览器增加一个垂直的滚动条。
三者的宽度如下（此时body的margin为0）：
html-1349px，body-1349px，innerWidth:1366。
可见html是不把滚动条的宽度算在内的。而innerWidth是把滚动条的宽度算在内的。
然后我们再来看height的大小。首先是不出现滚动条的情况（为便于实验，此时body的margin设置为0）。
html-height:200px，body-height:200px，innerHeight:608
这种情况下，html和body的高度是一致的，就是我们所设置的div的高度。而innerHeight则是不一致的。高了很多。
而当出现滚动条的时候（将div的高度设置为2000px，结果如下：
html-height:2000px，body-height:2000px，innerHeight:608。此时可以看到，html和body的高度会随之改变，但是innerHeight依旧没有改变。
总结
最后我们就知道了，一般情况下，html和body的宽高都是相等的，除非是body的margin的影响。其宽高不包括滚动条。而innerHeight和innerWidth代表的永远是窗口的大小，窗口变大，他们的值就会变大，窗口变小，他们的值也就会变小，而且它的值包括滚动条的宽度，有可能比body和html的值大，也可能小。完全在于body中的元素的尺寸。所以在我看来，因为innerWidth存在兼容性问题，所以无法有个方法能够兼容所有浏览器获得窗口的大小，主要是窗口的高度不能够获得。