關於window.innerHeight/innerWidth，document.documentElement.clientWidth/Height，document.body.clientWidth/Height

一、window.innerWidth/Height  =>  獲取瀏覽器可視區域寬/高度

========①寬度：經測試，該屬性獲取的是包含滾動條寬度的（有的博客乃至菜鳥教程都認為他不包含）瀏覽器可視區域寬度②高度：但是高度卻不包含工具欄高度，只是可視區域高度②IE 8 及更早 IE版本不支持這兩個屬性。===================

二、document.documentElement.clientWidth/Height  =>  獲取瀏覽器可視區域寬/高度　　//document.documentElement指的是html

========①寬度：瀏覽器可視區域寬度（不包括滾動條區域寬度）②高度：瀏覽器可視區域高度（不包含工具欄高度）①兼容ie8及更早ie版本=========================

三、document.body.clientWidth/Height  =>  獲取body的寬/高(除去margin)　　　//document.body指的是body元素

========①寬度：body文檔實際寬度（不包含滾動條區域寬度）②高度：body文檔實際高度（不包含工具欄高度）============================

經驗證得出以下結論：

　　①document.documentElement.clientHeight 和 window.innerHeight 是相等的,但是寬度差個滾動條寬度；

　　②document.documentElement.clientWidth/Height 和 window.innerWIdth/innerHeight 都是獲取瀏覽器可視區域的寬高。其大小隨瀏覽器縮放變化，不因body邊距變化；

　　③document.body.clientWidth/Height 獲取的是body實際寬高，不包括滾動條及工具欄寬高，其大小隨body元素實際寬高變化而變化。

　　

以上是小弟自己總結實驗隨筆，實驗環境有限，如有不妥，請見諒。最后，網傳的兼容方法獻上，具體怎么用，根據實際情況：

var w = document.documentElement.clientWidth ||  document.body.clientWidth;

var h = document.documentElement.clientHeight || document.body.clientHeight;