window和document獲取視窗大小的總結

原創

2020-02-21 02:50

　　　在學習H5畫布的時候遇到一種獲取畫布寬度的方式如下

canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

　　於是我將window和document幾種視窗大小的屬性放在一起比較。代碼如下：
　　　　　

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #test {
            width: 200px;
            height: 2000px;
            border: 1px solid chartreuse;
        }

        #content {
            width: 2000px;
            height: 200px;
            border: 1px solid red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="test"></div>
    <div id="content">

    </div>
    <script>
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var data = document.getElementById("content");
        data.innerHTML = "data寬度" + w + "<br />" + "data高度" + h + "<br />";
        data.innerHTML += "windows.innerWidth" + window.innerWidth + "<br />" + "windows.innerHeight" + window.innerHeight + "<br />";
        data.innerHTML += "windows.outerWidth" + window.outerWidth + "<br />" + "windows.outerHeight" + window.outerHeight + "<br />";
        data.innerHTML += "document.documentElement.clientWidth" + document.documentElement.clientWidth +
            "<br />" + "ducument.documentElement.clientHeight" + document.documentElement.clientHeight + "<br />";
        data.innerHTML += "document.body.clientWidth" + document.body.clientWidth + "<br />" + "document.body.clientHeight" + document.body.clientHeight;
    </script>
</body>

　　我設置了兩個塊元素，並且每個元素設置了1px的邊框，chrome的測試結果如下：
　　
　　沒有長寬滾動條時 兩個div大小都爲200*200
　　

　　
　　有長寬滾動條時 兩個div大小分別爲200*2000和2000*200
　　

　　
　　由測試結果可以得出，在水平方向，document.body.clientWidth的值可視窗口內部寬度（不包括滾動條），在垂直方向，document.body.clientHeight表示body元素的寬度。
　　document.documentElement.clientWidth/Height的值爲可視窗口內部大小，不包括工具欄和水平或垂直滾動條。
　　window.innerWidth/Height的值也是可視窗口內部大小加上滾動條寬度。
　　window.outerWidth/Height的值是可視窗口整體大小，包括工具欄和滾動條
　　（在chrome和Firefox測試的結果顯示兩個瀏覽器的滾動條寬度不一致）