移动开发之viewport详解

什么是viewport

移动端常见的viewport是用户网页的可视区域，也可称之为视区。在移动设备上可以认为存在着三个viewport。
　　移动端上的浏览器为了能够将那些为PC端设计的网站正常显示，会设置一个默认的值，但是由于PC大部分是横屏，而移动端是竖屏，所以该默认值是一个较宽的值，在绝大部分浏览器上都为980px，该值可以用document.documentElement.clientWidth。该viewport称为layout viewport（布局视口）。
　　布局视口的宽度是大于浏览器可视区域的宽度，而用户实际上能够看见的部分被称为虚拟视窗（visual viewport）。visual viewport的尺寸不是一个固定的值，每款设备的值都可能不一样，这个值可以用window.innerWidth获取。
　　光有上面两个视口仅仅能够实现兼容问题，我们缺一个能够完美适配移动设备的viewport，所以ideal viewport（理想视口）就应运而生。有了这个视口，用户就无需缩放，也不需要出现横向滚动条。
　　好了，viewport的相关概念就先介绍到这，更多的知识点可以跳转到ppk大神的系列文章一、ppk大神的系列文章二、ppk大神的系列文章三中查阅。

如何设置viewport值

当不设置viewport时，在layout viewport在移动端显示为980px或者1024px（由设备自己决定），并且在浏览器上会出现横向滚动条。在规范中，meta viewport有6个属性，现在我们来一一解释这些属性。

width:

该项目可为number或者device-width，前者为数值，设置移动端可视区的宽度，但是在一些老旧的安卓机上直接设置，可能不识别，而且为了更大的限度的兼容，所以一般将width设置为后者。当width=device-width时，所有的浏览器会将当前的viewport宽度变成ideal viewport的宽度，此时屏幕的layout viewport的宽度等于其ideal viewport宽度。

initial-scale:

关于缩放值有一个公式可以加速理解:
当前缩放值 = ideal viewport宽度/visual viewport宽度。因为一个手机的ideal viewport是固定的，所以缩放实质上是相对于visual viewport来缩放的，缩放值越大，那么其可视口区越大。如果不设置meta标签的viewport时，对于iphone7来说，其默认的initial-scale为0.383，当然如果设置了initial-scale，则默认的值失效。当设置其initial-scale为1的时候，浏览器会将当前的viewport宽度变成ideal viewport的宽度。

minimum-scale和maximum-scale:

这个是设置最小缩放比和最大缩放比，注意initial-scale要和minimum-scale相等,否则设置无效，并且在IOS10上，设置maximum-scale无效，但是min-scale则有效。

height和user-scalable

height是设置layout viewport的高度，改设置很少使用，user-scalable是是否允许用户进行缩放，在IOS10上设置该项无效。