移动开发-屏幕适配

视口（viewport）是用来约束网站中最顶级元素html的，即它决定了html的大小。

1、 PC端viewport

PC设备上，viewport的大小取决于浏览器窗口的大小，以CSS像素作为度量单位。

获取viewport的大小(即浏览器可视区域)：

document.documentElement.clientWidth;
document.documentElement.clientHeight;

在PC端，通过调整浏览器窗口可以改变viewport的大小，为了保证网页布局不发生错乱，需要给元素设定较大的固定宽度。

2、移动设备viewport

移动设备屏幕普遍比较小，大部分网站都是为PC设备设计的。
要想让移动设备正常显示网页，viewport足够大，才能保证原本为PC设备设计的网页也能在移动设备上正常显示。

移动设备上viewport不再受限于浏览器的窗口，可以自由设置viewport的大小。

常见默认viewport大小为980px。

这样就能保证原本为PC设计的网页，在移动端上也不会发生布局的错乱。

但是，iPhone5s和部分Android中我们发现页面内容（文字、图片）都被缩放了，而在部分安卓设备中则出现了滚动条。

产生缩放和滚动条的原因是什么呢？

移动设备的viewport有2个，为layout view 和ideal viewport

layout viewport（布局视口）指的是，我们可以进行网页布局区域的大小，以CSSS像素作为计量单位
```
// 获取layout viewport
document.documentElement.clientWidth;
document.documentElement.clientHeight;
```

ideal viewport（理想视口）值的是，设备屏幕区域。大小不可能被改变。

// 获取ideal viewport有两种情形
// 新设备
window.screen.width;
window.screen.height;
// 老设备
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;

为什么出现滚动条？

移动设备浏览器会默认设置一个layout viewport ,这个值会大于ideal viewport,ideal viewport就是屏幕区域，layout viewport是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条。

为什么出现缩放？

移动设备厂商认为，将网页完整显示给用户才最合理，不该出现滚动条。所以将layout viewport 进行了缩放。使其恰好完整显示在ideal viewport（屏幕）里。

3、移动浏览器

移动端开发主要是针对IOS和Android两个操作系统平台的，除此之外还有Windows Phone

移动端浏览器主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器

系统浏览器：指跟随移动设备操作系统一起安装的浏览器。
应用内置浏览器：应用内置的浏览器 [微信，或者支付宝，里面内置一个浏览器]，比如阅读公众号的里面的内容，其实打开的都是一个网页。支付宝里面，口碑，打开的也是一个页面。
第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等。

兼容性：移动端没有IE浏览器。其他的基本上都是基于webkit。
所以移动端开发写CSS3不用怎么考虑兼容

    webkit引擎的浏览器取消默认样式:
    -webkit-appearance:none

4、屏幕适配

移动页面最理想的状态是：避免滚动条且不被默认缩放处理。

可以通过设置：控制

4.1 viewport

viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳

设置属性content=”“实现，中间以逗号分隔:

width=device-width——width 设置layout viewport 宽度，其取值可为数值或者device-width。
height=device-height
initital-scale——设置页面的初始缩放值（数值）
maximum-scale——允许用户的最大缩放值
minimum-scale——允许用户的最大缩放值
user-scalable——是否允许用户缩放，值为”no”或”yes”

注：device-width 和 device-height就是ideal viewport的宽高。

4.2 控制缩放

开发中一般同时设置width=device-width和initial-scale=1.0控制缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.3 避免滚动条

我们知道，之所以出现滚动条是因为layout viewport 大于 ideal viewport 导致的。

滚动条是 layout viewport 相对于 ideal viewport 的，所以只要设置 layout viewport 小于或等于 ideal viewport，即

<meta name="viewport" content="width=device-width">。

同时，我们还需要配合百分比来实现布局。否则绝对宽度过大还是会出现滚动条。

4.4 适配方案

移动端屏幕适配的几种方式：

使用百分比布局+视口（流式布局）
固定宽度 320
响应式布局
rem

1. 使用百分比布局+视口（流式布局）

1、设置
2、设置页面宽度为百分比

width       参照父元素的宽度
height      参照父元素的高度

2. 固定宽度 320 （此方案很少采用）

1、设置
2、设置内容区域大小为320px
3、设置内容区域水平居中显示