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
