方式一：window.innerWidth / window.innerHeight

這種方式只支援IE9以及以上版本的瀏覽器

網頁高度，開啟F12控制檯當然高度會不同

方式二：document.documentElement.clientWidth

console.log(document.documentElement);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

document.documentElement獲取到的是html，從而獲取到了整個網頁

可用於IE9以下，當然也支援IE9以及以上 可以用來相容

方式三：混雜模式/怪異模式 下的寬高的獲取

怪異模式：沒有寫文件宣告（就是第一行的那個< !DOCTYPEhtml>）就是怪異模式，這種模式下會有一些不同的渲染方式，感興趣的小夥伴可以去了解（這裡講解的獲取寬高就是怪異模式特點之一）。

http://www.bijianshuo.com 軟文發稿平臺

console.log(document.compatMode);
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);

這樣獲取的方式只有在混雜模式下可以正確獲取，在標準模式下不會報錯，但是獲取到的寬高不是正確的。
document.compatMode可以知道當前文件是混雜還是標準（BackCompat混雜，css1Compat標準）

你以為結束了？
問題才出現！~
所以，問題來了：怎麼相容？（別認為相容不重要，不相容就有很大的報錯風險啊喂！畢竟你不知道使用者會不會用IE6開啟網頁@_@）
封裝：相容了高低版本瀏覽器，標準/混雜模式

function getWid_Hei(){
    let width,height;
    if(window.innerWidth){
        width = window.innerWidth;
        height = window.innerHeight;
    }else if(document.compatMode === "BackCompat"){
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }else{
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    }
    return {
        width:width,
        height:height
    }
}
let {width,height} = getWid_Hei();
console.log(width,height);