移动前端viewport的基础概念

在PC端，视口指的是浏览器的可视区域，其宽度和浏览器的宽度一致，在css标准文档中，视口是所有CSS百分比宽度计算基础，为CSS布局限制了一个最大的宽度。
viewport在移动端是一个很重要的概念，涉及到三个视口：
布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）
。常见的设置如下：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no;" />

其中viewport的参数：

1、width:控制viewport的大小，也可以指定一个具体的值，或者是特殊的数值（device-width是设备的宽度）；

2、height：和width相对应，指定viewport的高度

<meta name="viewport" content="width=640,inital-scale=1.0,user-scalable=yes" />

但是在实际的应用中，都是把视口的宽度设置为设备的宽度

3、inital-scale:初始的缩放比例，也就是页面第一次加载（load）的缩放比例；

4、maximum-scale:允许用户缩放到最大的比例；

5、minimum-scale:允许用户缩放到最小的比例；

6、user-scalable:定义用户是否可以手动缩放。

移动端浏览器通常的宽度是240px ~640px，PC端的设计网站的宽度至少是1024px,依然以浏览器窗口作为视口的话，那网站内容在手机上看起来就会很窄。配置viewport让移动端中的视口与浏览器宽度不再关联。

布局视口

一般移动设备的浏览器都默认设置一个标签，定义一个虚拟的布局视口（Layout Viewport），用于解决早期页面在手机上的显示。iOS、Android基本上都会默认这个视口分辨率为980px，PC上的网站能够在手机上呈现，只是元素看上去很小，可以通过手动缩放页面。

布局视口的宽高通过document.documentElement.clientWidth/Height获取

视觉视口

视觉视口就是用户当前看到的区域，可以通过苏缩放来操作视觉视口，比如iPhone5 是320px。通过screen.width获取visual viewport的宽度。

通过<meta name="viewport" content="initial-scale=XXX" />
设置visual viewport的宽度。visualviewport的宽度为screen.width/initial-scale

理想视口（ideal viewport）

理想视口对设备而言是理想的布局视口，显示在理想视口中的网站宽度是最理想的宽度，用户不需要进行缩放操作。设置布局视口和理想视口的宽度一致：

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

viewport meta标签只对移动端有效，不影响PC端。

总结：

1、默认情况下Layout viewport 为980px

2、width设置布局视口，initial-scale设置视觉视口

3、Layout viewport 的宽度始终大于visual viewport的宽度

不同移动设备的相关viewport size 数据参考：http://viewportsizes.com/