js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明讲解（附图）
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">一、介绍</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">1. 容器</a></li><li><a href="#_lab2_0_1">2. 物理尺寸和分辨率</a></li><li><a href="#_lab2_0_2">3. 展示图</a></li></ul><li><a href="#_label1">二、屏幕信息</a></li><ul class="second_class_ul"></ul><li><a href="#_label2">三、浏览器信息</a></li><ul class="second_class_ul"></ul><li><a href="#_label3">四、页面信息</a></li><ul class="second_class_ul"></ul></ul></div><p>前端js开发中我们常遇到对页面、屏幕、浏览器宽高和位置的获取问题，有时间查到了js的实现代码，但是不知道为什么。本篇图文并茂讲解Web环境中屏幕、浏览器及页面的高度、宽度信息。</p><p class="maodian"><a name="_label0"></a></p><h2>一、介绍</h2>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>1. 容器</h3>
<p>一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。</p>
<p>HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。</p>
<p>通过Js的一些对象可以获取这些容器的高度、宽度。</p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>2. 物理尺寸和分辨率</h3>
<p>容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。</p>
<p>如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。</p>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>3. 展示图</h3>
<p style="text-align:center"><img alt="" height="458" src="https://img.jbzj.com/file_images/article/202302/2023211160458002.png?202311116549" width="1088" /></p>
<p class="maodian"><a name="_label1"></a></p><h2>二、屏幕信息</h2>
<p><img alt="" src="https://img.jbzj.com/file_images/article/202302/2023211160629426.png" /></p>
<p><strong>screen.height ：</strong>屏幕高度。</p>
<p><strong>screen.width ：</strong>屏幕宽度。</p>
<p><strong>screen.availHeight ：</strong>屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。</p>
<p><strong>screen.availWidth ：</strong>屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。</p>
<p><strong>任务栏高/宽度 ：</strong>可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight 。</p>
<p class="maodian"><a name="_label2"></a></p><h2>三、浏览器信息</h2>
<p><img alt="" src="https://img.jbzj.com/file_images/article/202302/2023211160640953.png" /></p>
<p><strong>window.outerHeight ：</strong>浏览器高度。</p>
<p><strong>window.outerWidth ：</strong>浏览器宽度。</p>
<p><strong>window.innerHeight ：</strong>浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。</p>
<p><strong>window.innerWidth ：</strong>浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。</p>
<p><strong>工具栏高/宽度 ：</strong>包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。</p>
<p class="maodian"><a name="_label3"></a></p><h2>四、页面信息</h2>
<p><img alt="" src="https://img.jbzj.com/file_images/article/202302/2023211160647772.png" /></p>
<p><strong>body.offsetHeight ：</strong>body总高度。</p>
<p><strong>body.offsetWidth ：</strong>body总宽度。</p>
<p><strong>body.clientHeight ：</strong>body展示的高度；表示body在浏览器内显示的区域高度。</p>
<p><strong>body.clientWidth ：</strong>body展示的宽度；表示body在浏览器内显示的区域宽度。</p>
<p><strong>滚动条高度/宽度 ：</strong>如高度，可通过浏览器内页面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。</p>
頁:
[1]