meta标签name属性值viewport解析

什么是viewport，这篇文章介绍的很详细，有兴趣的朋友可以点击这里阅读。因为内容太长，这边就不做过多说明，只做简要概况。

什么是viewport？

在手机浏览器中能看到网页内容的那块区域称为可视区域，viewport就相当于那块可视区域，但是它的实际大小可能比那块可视区域要大或者要小（一般来说都是大于可视区域），那具体是多大？不同设备它的viewport都不一样，没有固定的值。这就会造成在有些设备中如果viewport大于可视区域就会造成浏览器出现横向的滚动条。所以为了解决这个问题，viewport属性就出现了，我们可以通过meta标签声明viewport属性, 它支持以下6个值，并且可以搭配使用

名称	描述
width	设置viewport的宽度，为一个正整数，或字符串"width-device"代表设备屏幕大小
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置viewport的高度，为一个正整数，或字符串"height-device"代表设备屏幕大小
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

常见的搭配有：

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

它告诉浏览器当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。这样就要让浏览器页面按照设备的宽度来进行显示，不会因为viewport宽度过宽而造成出现滚动条影响用户体验。另外实际上定义width=device-width 和 定义initial-scale=1.0的效果都一样，它们都可以让viewport的宽度等于设备的宽度，因为initial-scale 缩放是根据设备宽度进行缩放，1就相等于没有缩放。但是如果两者只声明一个，会造成iphone、ipad以及IE横竖屏不分，所以最佳解决方案是搭配使用即同时声明width=device-width, initial-scale=1.0