首先，我們知道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存在兼容性問題，所以無法有個方法能夠兼容所有瀏覽器獲得窗口的大小，主要是窗口的高度不能夠獲得。