window.innerWidth、document.body.clientWidth和html的大小的区别

　　首先，我们知道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 = 'width:200px;height: 200px;background: red;'>
</div>

　　如图效果：

　1.获取html的大小

　　如下代码：

var html = document.querySelector('html');
// 获取html元素的宽度
console.log("html-width:" +document.defaultView.getComputedStyle(html,null).width);
// 获取html元素的高度
console.log("html-height:" + document.defaultView.getComputedStyle(html,null).height);

　　结果显示：html-width:1366px，html-height:216px

 2.获取body的大小

　　代码如下：

console.log("clientWidth:" + document.body.clientWidth);
console.log("clientHeight:" + document.body.clientHeight);

　　结果显示：body-width: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-width:1349px，body-width: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存在兼容性问题，所以无法有个方法能够兼容所有浏览器获得窗口的大小，主要是窗口的高度不能够获得。