那些年糾結過得各類屏幕高度和寬度

時間 2019-11-12

標籤那些年糾結過得各類屏幕高度寬度简体版

原文原文鏈接

　　在寫頁面的時候你確定遇到過各類頁面寬高相關的東西，好比：clientHeight、offsetHeight、scrollHeight、availHeight、style.height、innerHeight、outerHeight、scree.height。。。是否是看着就有點兒暈了。下面，就讓我來爲大家簡單介紹下這些小寶寶吧，只要認識了就是好朋友，什麼都好說^_^。時間和能力有限，錯誤之處還請各位英雄不吝賜教！這裏先謝過了♪(･ω･)ﾉ。html

（本文僅從名詞解釋角度，說明各個詞語的具體含義是什麼，不作瀏覽器兼容等方面的說明，由於比較複雜，後面有時間，專門寫內容說明。全部代碼只在chrome瀏覽器中運行過。）chrome

先放幾張圖，對瀏覽器的概貌有個大體的瞭解：瀏覽器

第一張：原始的整個屏幕的截圖，也就是大多數用戶看到的瀏覽器的樣子。工具

第二張：我用不一樣的線條標出了各類區域，這些區域將是本文要討論的區域們。下面先簡單解釋下：測試

大紅色：客戶端的整個屏幕spa

黃色：瀏覽器窗口code

綠色：網頁可展現區加滾動條htm

淺綠色：不含滾動條的網頁區域對象

第三張，這幅圖包含了工具欄：blog

品紅色：整個屏幕

棕色：不含工具條和滾動條的網頁內容區域

一，瀏覽器可視區域的寬高（innerHeight和outerHeight）：

瀏覽器就是向咱們展現內容的整個窗口，它是window對象，會隨着咱們調整瀏覽器的大小爲最大化和最小化之間的任意值二變化，包括標題欄，標籤欄，以及滾動條等等。

inner前綴寬高只包含內容展現區，不包括工具條等其餘和內容展現無關的東西。

outer前綴的寬高包括工具條等其餘非內容展現區的東西。

具體以下圖所示：

咱們在寫頁面時，好像通常不會用到outter寬高相關的東西。好像一般會用到inner寬高。下面給出獲取代碼：

            //網頁窗口內包含滾動條的寬度
            console.log("window.innerWidth：" + window.innerWidth);
            //網頁窗口內，包含滾動條的高度
            console.log("window.innerHeight：" + window.innerHeight);
            //整個瀏覽器窗口的寬度
            console.log("window.outerWidth：" + window.outerWidth);
            //整個瀏覽器窗口的高度
            console.log("window.outerHeight：" + window.outerHeight);

二，網頁可用工做區的寬高和可視區域的寬高：

可用工做區，可用理解爲第一部分中，inner寬高所包括的內容，可是不該該包括滾動條。就是，咱們展現內容能夠用使用的區域。

請注意，不管是client前綴仍是offset前綴，取值時都是以body爲基準的，不包括body的margin值。client前綴不包括body邊框，offset包括body邊框。通常狀況下，咱們不會給body設置邊框和margin，可是必定注意，不少瀏覽器會自動給body設置margin，好比chrome就默認設置8個像素的margin。

            //body元素不包括margin和border的實際寬度，可是通常瀏覽器會自動給body添加margin值。
            console.log("document.body.clientWidth：" + document.body.clientWidth);
            //body元素不包括margin和border的實際高度，包括可視區以外的內容
            console.log("document.body.clientHeight：" + document.body.clientHeight);
            //同document.body.clientWidth,可是包括body的邊框
            console.log("document.body.offsetWidth：" + document.body.offsetWidth);
            //同document.body.offsetWidth，可是包括body的邊框
            console.log("document.body.offsetHeight：" + document.body.offsetHeight);

三，網頁正文的寬高（包括滾動區域以外的內容）：

            console.log("window.screenLeft：" + window.screenLeft);
            //網頁包括滾動條以外區域的寬
            console.log("document.body.scrollWidth：" + document.body.scrollWidth);
            //網頁包括滾動條以外區域的高

四，屏幕分辨率的寬高，也就是屏幕實際的寬高：

            //屏幕分辨率的高度，也便是實際高度
            console.log("window.screen.height：" + window.screen.height);
            //屏幕分辨率的寬度，也便是實際高寬
            console.log("window.screen.width：" + window.screen.width);

五，屏幕可用區域的寬高（不包括任務欄）：

            //整個客戶端屏幕可用區的高度，不包括底部任務欄
            console.log("window.screen.availHeight：" + window.screen.availHeight);
            //整個客戶端屏幕可用區的寬度
            console.log("window.screen.availWidth：" + window.screen.availWidth);

本文全部測試代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>各類寬高小結</title>
    </head>
    <style>
        body{
            border: 6px solid aqua;
        }
        ul li{
            list-style: none;
            padding: 40px;
            height: 80px;
            width: 100%;
        }
    </style>

    <body>
        body設置了6像素的藍色邊框哦！
        <div>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
        <script>
            //網頁窗口內包含滾動條的寬度
            console.log("window.innerWidth：" + window.innerWidth);
            //網頁窗口內，包含滾動條的高度
            console.log("window.innerHeight：" + window.innerHeight);
            //整個瀏覽器窗口的寬度
            console.log("window.outerWidth：" + window.outerWidth);
            //整個瀏覽器窗口的高度
            console.log("window.outerHeight：" + window.outerHeight);
            
            //body元素不包括margin和border的實際寬度，可是通常瀏覽器會自動給body添加margin值。
            console.log("document.body.clientWidth：" + document.body.clientWidth);
            //body元素不包括margin和border的實際高度，包括可視區以外的內容
            console.log("document.body.clientHeight：" + document.body.clientHeight);
            //同document.body.clientWidth,可是包括body的邊框
            console.log("document.body.offsetWidth：" + document.body.offsetWidth);
            //同document.body.offsetWidth，可是包括body的邊框
            console.log("document.body.offsetHeight：" + document.body.offsetHeight);
            
            //整個客戶端屏幕可用區的高度，不包括底部任務欄
            console.log("window.screen.availHeight：" + window.screen.availHeight);
            //整個客戶端屏幕可用區的寬度
            console.log("window.screen.availWidth：" + window.screen.availWidth);
            //屏幕分辨率的高度，也便是實際高度
            console.log("window.screen.height：" + window.screen.height);
            //屏幕分辨率的寬度，也便是實際高寬
            console.log("window.screen.width：" + window.screen.width);
            
            //網頁包括滾動條以外區域的寬
            console.log("document.body.scrollWidth：" + document.body.scrollWidth);
            //網頁包括滾動條以外區域的高
            console.log("document.body.scrollHeight：" + document.body.scrollHeight);
            
            //瀏覽器距離客戶端屏幕頂部邊緣的距離
            console.log("window.screenTop：" + window.screenTop);
            //瀏覽器距離客戶端屏幕左邊緣的距離
            console.log("window.screenLeft：" + window.screenLeft);
            //
            console.log("document.body.scrollTop：" + document.body.scrollTop);
            //
            console.log("document.body.scrollLeft：" + document.body.scrollLeft);
            
            
        </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。