二分钟了解layout viewport、visual viewport、ideal viewport

layout viewport：布局视口，就ios而言，移动设备浏览器的layout viewport一般默认设置为980px。

visual viewport：视觉视口，即设备的像素分辨率，以iphone8为例，分辨率为750*1334像素。每个手机的像素分辨率不同，分辨率的大小由硬件决定的。

ideal viewport：理想中的视口。理想视口与设备的宽度一致，iphone8的理想视口是375px。

移动端开发时，我们利用meta标签对viewport进行控制。

<meta  name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">复制代码

width：这里的width设置的是layout viewport，device-width为设备的宽度，也就是我们心中的ideal viewport大小，所以width=device-width的意思是将layout viewpport设置为ideal viewport的宽度。

initial-scale：指定页面的初始缩放比例。比例为ideal viewport/layout viewport，当比例为1时，两者相等。

<meta name="viewport" content="initial-scale=1">复制代码

与

<meta name='viewport' content='width=device-width' />复制代码

这两种meta设置方法达到的效果是一致的。

maxinum-scale：允许用户对页面的最大缩放比例。

mininum-scale：允许用户对页面的最小缩放比例。

user-scalable：是否允许用户对页面进行手动缩放。

三种viewport之间的关系(以iPhone8为例)：

ideal viewport基本决定了layout viewport可能的大小。

visual viewport/ideal viewport的比例为2，iphone8为二倍屏。

参考文档：http://www.cnblogs.com/2050/p/3877280.html