[HTML] 用meta设置ideal viewport

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

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

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

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

<!-- 让ideal viewport的宽度等于设备的宽度，同时不允许用户手动缩放。-->
<meta 
    name="viewport" 
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
>

<u></u>width：设置ideal viewport 的宽度，为一个正整数，或字符串"width-device"
<u></u>initial-scale：设置页面的初始缩放值，为一个数字，可以带小数，小于1表示缩放
<u></u>minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
<u></u>maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
<u></u>height：设置ideal viewport 的高度，这个属性对我们并不重要，很少使用
<u></u>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的深入理解