移动端Viewport

---

一、Viewport

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

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

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。