手机移动端屏幕宽高详解

### 前因

目前的移动端布局,以响应式布局居多,以适应在不同分辨率的屏幕,实现布局的方式可能有很多种,但是不管使用哪种方式,获取设备的可用宽高就能为问题的关键。

### 宽高的获取

“`
document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth
document.body.clientHeight
window.innerWidth
window.innerHeight
screen.availWidth
screen.availHeight
screen.width
screen.height
“`

常用的获取方式,也就上述的几种,还有一些其他的我们这里,暂时不做考虑。

接下来,我们默认文档声明为HTML5的文档声明,默认使用`IOS`的`safari`为测试浏览器,来做一些简单的测试。

### 空白页,上述属性的取值

查看截图,分别为横屏和竖屏时候的取值。
![Alt text](http://www.zhangyunling.com/study/2018/20180311/2.png)

![Alt text](http://www.zhangyunling.com/study/2018/20180311/1.jpg)

您也可以直接访问:[示例](/study/2018/20180311/index.html)

这是在没有设置任何属性的情况下,得到的宽高的取值如上图所示:

其中,每一个取值,都是包含宽和高,比如拿`screen.width = 375-667`为例,其实代表了:`screen.width= 375,screen.height = 667`。其他都类似。

那么接下来,我们就顺便来看看,每一个属性有什么影响?

这里,为了能更方便的对比,我们就不按照属性从上到下的顺序来看了,首先要看的是最稳定的数据。

#### screen.availWidth和screen.width

`screen`是设备的屏幕对象,理论上,当一个设备固定之后,那么这个设备的屏幕的可视宽度和高度也是固定的,所以这里也可以看出

在上述的横屏和竖屏时,得到的数据,都是一致的:

“`
screen.availWidth = 375px;
screen.width = 667px;
“`

并且,有一点需要注意的是,不管横屏还是竖屏,宽高都是相同,也就代表着,这两个属性,在任意情况下,都是不变的,并且其取值是按照竖屏时的属性,进行取值的。

接下来,我们就按照375和667为例,来看看其他的属性,都是如何取值的。

#### window.innerWidth与document.documentElement.clientWidth。

得到的结果(仅拿window.innerWidth与window.innerHeight)

“`
// 竖屏时 ,未全屏
window.innerWidth = 375
window.innerHeight = 553;

// 横屏时,全屏
window.innerWidth = 667
window.innerHeight = 375;
“`

可以看如上的两幅图,这两个属性得到的值,也是完全相同,但是在横屏和竖屏时的属性值,却是不同的。

这个不同主要来自于两个方面:

1. 横屏时,宽高调换了
2. 竖屏时,浏览器没有全屏显示。

所以,先看横屏全屏显示时,宽高正好就是设备可视区域的宽高,也是375与667,只是,宽是667,高是375。

竖屏时,由于存在了手机的状态栏,浏览器的导航栏和控制栏,所以,结果宽度是375,高度却只有553,也就是说,手机状态栏,浏览器导航栏和控制栏,占去了667-553=114的高度。

所以,window.innerWidth,window.innerHeight,document.documentElement.clientWidth,document.documentElement.clientHeight这几个属性,是取的浏览器内部的可视宽高,即浏览器一屏的宽高。

#### document.body.clientWidth 与document.body.clientHeight

这个我们可以见简单的这么理解,body元素的宽度或者高度。

而在横屏和竖屏时,取得的值入下:

“`
// 竖屏
clientWidth = 375
clientHeight = 150

// 横屏
clientWidth = 667
clientHeight = 165
“`

因为我在页面上设置了所有的元素的margin:0px;padding:0px;所有,body的宽度,就是浏览器可视区域的宽度,当竖屏和横屏时,会跟着变化。

而body的内容高度,则由body内部元素撑起的实际高度确定,设置body宽度账户,这两个属性的值,可以自己尝试去试试看结果。

### 结束

为什么这里要说一下这个呢,因为在移动端弹性布局中,rem单位布局,是一个很常用的方案,而对于rem的计算,就是需要我们了解到,需要用什么属性,来作为这个确认rem的基准数值,如果我们不能很好的理解,那么就可能导致在竖屏和转屏时,出现一些异常。

至于如何实现rem的基准计算,这里就不做说明了,仅做参考。

本文地址:http://www.zhangyunling.com/?p=814

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>