HTML5移动端开发之viewport

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的页面适配或响应各种不同分辨率的移动设备。

什么是viewport?

移动前端中常说的viewport(视口)就是用户网页中的可视区域。

viewport是通过meta标签中的name属性设置的，添加位置在head标签里面。

它会告诉浏览器使用设备的屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。

viewport的语法

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

width:用于控制viewport的大小，可以指定一个具体的值（如600），也可以为特殊的值（如：device-width，即设备的宽度）。

initial-scale:设置缩放比例，当其值为1时，表示既不放大也不缩小。

maximum-scale：表示页面可以放大的最大倍数，当值为3.0时，即页面可以放大到初始页面大小的三倍。

minimum-scale：表示允许用户缩小的最小比例。

user-scalable:表示用户是否可以手动缩放，yes表示可以，no表示不可以。