[HTML] 用meta设置ideal viewport

移动设备上的viewport分为layout viewport、visual viewport和ideal viewport三类。

layout viewport是浏览器设置的显示大小，由浏览器厂商决定，一般为980px。
visual viewport是屏幕支持的分辨率大小，由硬件决定。
ideal viewport是用户设置的大小，由标签决定。

例如：
页面原始宽度1000px，layout viewport=980px，visual viewport=640px
这时候，页面会在640px的空间，（缩放）显示980px的内容。
移动设备默认的ideal viewport是layout viewport。

如果设置ideal viewport=320px，则会在640px的空间，（放大）显示320px的内容。

width：设置ideal viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数，小于1表示缩放
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
height：设置ideal viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable：是否允许用户进行缩放，值为"no"或"yes"，yes代表允许，no代表不允许

注：
随着市场上一些高分辨率设备出现，
例如iPhone3GS与iPhone4S物理大小相同（3.5英寸），但是分辨率不同。
（iPhone3GS=480px*320px，iPhone4S=960px*640px）
所以，最好让设备显示适合屏幕物理大小的内容。
例如，3.5英寸的设备上都显示320px的内容。

因此，device-width是与设备的物理大小相关的，
不同的设备拥有不同的device-width，可以到Viewport Sizes查看。

例如：

iPhone<=5s：device-width=320px
iPhone=6：device-width=375px
iPhone=6p：device-width=414px

参考：
A tale of two viewports — part one
A tale of two viewports — part two
Meta viewport
移动前端开发之viewport的深入理解