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

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。

1介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。

2屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。

3浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。

4页面信息：介绍HTML页面尺寸信息；如：body总的、展示的高度和宽度。

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

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

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

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

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

screenheight ： 屏幕高度。

screenwidth ： 屏幕宽度。

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

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

任务栏高/宽度 ： 可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screenheight - screenavailHeight 。

windowouterHeight ： 浏览器高度。

windowouterWidth ： 浏览器宽度。

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

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

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

bodyoffsetHeight ： body总高度。

bodyoffsetWidth ： body总宽度。

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

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

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

jQuery的api文档中有列出来，获取网页的滚动高度用方法：scrollTop() 即可。注意：要获取网页的滚动高度，兼容所有浏览器的写法是获取window对象然后调用scrollTop()函数。简单示例：alert($(window)scrollTop());jQuery的api文档目录翻译见：

一、资源文件夹之间的关系

Android开发中，UI一般会制作多种素材，根据素材的分辨率大小，放在如下几个文件夹中：

ldpi（120dpi）

mdpi（160dpi）

hdpi（240dpi）

xdpi（320dpi）

xxdpi（480dpi）

xxxdpi（640dpi）

以mdpi（160dpi）为基准

可以看出系数比例关系：075：1：15：2：3：4

二、常规的安卓手机分辨率及其dpi和density的计算

查看一下现在Android Studio自带的模拟器设备：

手机屏幕的dpi和density的计算：

以Nexus5X为例：

密度density：420/160=2625

三、资源文件的加载

很明显420dpi不属于上述文件分类中的任何一个，安卓手机分辨率千奇百怪，因此，上述文件夹不是指定具体的分辨率，而是一个范围，如ldpi（value<120dpi），mdpi（120dpi<value<160dpi），以此类推，420dpi会加载xxdpi中的资源文件

验证一下：

这里有两张

将171×171放入xxdpi中，64×64放入xdpi中，用Nexus5X进行测试，应该加载哪个文件夹中的资源呢？

结果如图：

这个到底是加载的哪个文件夹的呢，加载的是171还是64？我也不知道。那么我调换一下，将171×171放入xdpi中，64×64放入xxdpi中，如果变小了，那么证明，必然加载的是xxdpi文件夹的了。

结果如图：

四、转换公式

dp和px之间的换算：

dp=pxdensity

实际开发过程中，常规用到的转换公式是：

以dp2px为例，这里有一个小细节，根据上面的推导，return的结果应该是 (int) (values density)，而结果会+05f再强转，原因是浮点型强转整型过程直接回去除小数部分，+05f相当于四舍五入的过程（小数部分大与05的+05f后会进一位）,结果显得更加精确。

一般来说在移动浏览器上是拿不到屏幕真实分辨率的，因为页面渲染是在一个叫viewport的页面绘制区域内（说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的）。viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用windowinnerHeight还是windowscreenwidth拿到的都是320px。当然我们可以通过meta设置改变viewport的比例，如initial-scale=5就可以让viewport和屏幕一致的尺寸，但这个比例在不同的手机上并不一定是2倍关系，特别是Android手机，在大屏手机（5寸以上）上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸，就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法，就是：css的媒体查询（@media）是能够检测屏幕尺寸（其实是浏览器窗体的真实尺寸，并不是屏幕的真实物理尺寸，介意的朋友就不要看了）的，通过它来给网页内的某个元素设置一个特殊的属性，然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值（比如480px到540px之间、540px到600px之间等等），不是精确值，所以可能得不偿失，因此我是不推荐的。

手机实际的物理尺寸。手机对角线长度，1英寸=254厘米。比如常用手机的5英寸，55英寸等。

实际宽度与高度比率。比如 16:9。

表示宽度一列、高度一行的像素点个数。比如：480x320 1920x1080

VGA：Video Graphics Array，即：显示绘图矩阵，相当于640×480 像素；

HVGA：Half-size VGA，即：VGA的一半，分辨率为480×320；

QVGA：Quarter VGA，即：VGA的四分之一，分辨率为320×240；

WQVGA：Wide Quarter VGA，即：扩大的QVGA，分辨率比QVGA高，比VGA低，一般是：400×240，480×272；

WVGA：Wide Video Graphics Array，即：扩大的VGA，分辨率为800×480像素；

FWVGA：Full Wide VGA ，VGA的另一种形式，比WVGA分辨率高，其分辨 率为854×480象素(16:9)。

dot per inch 每英寸的像素数，可以反映屏幕的清晰度。

px(pixel) 像素简写

如120dpi,160dpi等,假设QVGA(320240)分辨率的屏幕物理尺寸是（2英寸15英寸），dpi=160。

计算方法：像素面积除以物理面积 (320x320+240x240)/(2x2+15x15)=400/25=160；

在Android中，可以参考DisplayMetricsjava类。drawable文件夹下，有如下

drawable-ldpi对应120dpi

drawable-mdpi对应160dpi

drawable-hdpi对应240dpi

drawable-xhdpi对应320dpi

drawable-xxhdpi对应480dpi

drawable-xxxhdpi对应640dpi

dip（Device Independent Pixels）设备独立像素 dp是dip简写

计算公式为：px=dpx(dpi/160)  160指 Android系统以160dpi作为基准

例如，在1920x1080分辨率下，屏幕尺寸为14英寸情况下（笔记本尺寸），显示一个长度在50x50像素的，显示很正常。如果分辨率不变，屏幕尺寸变为45英寸，用户看到长度显得很小。这就需要一个独立于像素点的显示单位。

dp优势在于，在分辨率相同情况下，在不同屏幕上显示大小等比是一致的。

dp用于描述显示的长宽。

sp用于描述文字大小，使用效果与dp描述长度效果是一致的。

Android屏幕布局时，描述长宽推荐使用dp作为单位，描述文字大小推荐使用sp为单位。但是使用dp并不能解决Android多屏幕的适配问题。

以上就是关于HTML 获取屏幕、浏览器、页面的高度宽度全部的内容，包括:HTML 获取屏幕、浏览器、页面的高度宽度、怎么获取网页高度，屏幕高度，滚动高度、关于屏幕适配的dp、dpi、px等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！