那些年纠结过得各类屏幕高度和宽度

时间 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>