### 前因

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

### 宽高的获取

“`

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`为测试浏览器，来做一些简单的测试。

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

查看截图，分别为横屏和竖屏时候的取值。



您也可以直接访问：[示例](/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的基准计算，这里就不做说明了，仅做参考。