一、介绍

1. 容器

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。

HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。

通过Js的一些对象可以获取这些容器的高度、宽度。

2. 物理尺寸和分辨率

容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。

如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。

3. 展示图

二、屏幕信息

screen.height ：屏幕高度。

screen.width ：屏幕宽度。

screen.availHeight ：屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。

screen.availWidth ：屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。

任务栏高/宽度：可通过屏幕高/宽度减去屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight 。

三、浏览器信息

window.outerHeight ：浏览器高度。

window.outerWidth ：浏览器宽度。

window.innerHeight ：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

window.innerWidth ：浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

四、页面信息

body.offsetHeight ：body总高度。

body.offsetWidth ：body总宽度。

body.clientHeight ：body展示的高度；表示body在浏览器内显示的区域高度。

body.clientWidth ：body展示的宽度；表示body在浏览器内显示的区域宽度。

滚动条高度/宽度：如高度，可通过浏览器内页面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。

HTML 获取屏幕、浏览器、页面的高度宽度相关推荐

关于使用“JS获取屏幕，浏览器，网页高度宽度”的个人思考
在js开发中免不了获取屏幕或文档的宽度高度问题.今天在搜索引擎中搜索时,看到最多的就是这篇文章这张图片已经被转载了很多了,我想说的是,在转载之前能否先思考下,是否完全懂了,而不是囫囵吞枣(虽然我也记 ...
JS如何获取屏幕、浏览器及网页高度宽度？
目的在浏览器中,用JS获取高度和宽度都各有3种,分别包括屏幕,浏览器和网页的.用来解决各种计算定位问题!以至于我各种记不住,写个随笔方便查询. 屏幕宽高说明:顾名思义,屏幕宽高是指显示器的分辨率. ...
函数语法：JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转载）...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
JavaScript获取屏幕可视区域的高度
开发工具与关键技术:DW/浏览器 : JavaScript. 作者:刘佳明撰写时间:2019年 2 月 17 日本篇为大家简单阐述编程使如何让页面的窗口高度随着屏幕可视的高度变化而变化: 该方法不 ...
JS获取屏幕，浏览器，网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
JS获取屏幕浏览器网页高度和宽度属性
1 网页可见区域宽:document.body.clientWidth 2 网页可见区域高:document.body.clientHeight 3 网页可见区域宽:document.body.off ...
【JAVASCRIPT】javascript获取屏幕，浏览器，网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetW ...
获取屏幕，浏览器，网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetW ...
js获取当前浏览器页面高度及宽度信息的方法
function getInfo() { var s = ""; s += " 网页可见区域宽:" ...

HTML 获取屏幕、浏览器、页面的高度宽度

目录