关于viewport的一些总结

大家都知道，viewport是用来设置可视窗口的属性的，它有一下几个值
<b>1.width</b>： 用来设置layout viewport的宽度.
<b>2.initial-scale</b>： 用来设置页面的初始缩放值以及layout viewport的宽度。
<b>3.minimum-scale</b>： 用来设置允许的最小缩放值(例如，用户可以缩小至什么程度)。
<b>4.maximum-scale</b>： 用来设置允许的最大缩放值(例如，用户可以放大至什么程度)。
<b>5.height</b>： 期望用于设置layout viewport的高度。但一直没被支持。
<b>6.user-scalable</b>： 当设置为no时，则禁止用户进行缩放

另外还有两个重要的属性，并不在viewport的定义里面，但是必须知道它们，我们暂时列为7和8
<b>7.ideal viewport</b>:字面翻译为理想视窗，其实这个值可以将inital viewport设为1，width设为device-width，再使用document.documentElement.getBoundingClientRect().width计算出来，也可根据chrome中的开发者工具的模拟器查看，一般值如下，ip4,ip5 320,ip6 375,ip6s 414,...

<b>8.layout viewport</b>：这个值是ideal viewport和initial-scale共同计算的结果，计算方式是，假如ideal viewport为300，initial-scale为0.5,那么它就为600，即 ideal viewport/initial-scale,但这是对于一般情况成立，因为layout viewport是有最大最小值限制的

说完基本概念，我们来谈谈怎么用width去设置layout viewport<b>（lv）</b>,根据定义，只要直接这样设置width=400,那么lv就等于400，设置width=200,那么lv就等于200，我一开始也是这么认为的，但是，此处并不是这样，我在ip5s中验证了下，最小值是320，最大值是10000，在vivo x5中验证了下，最小值是360，最大值是10000，所以，此处要留意<b>最小值最大值</b>的设置；
OK，这篇文章就到此吧，主要是讲解理论知识的，接下来大家可以关注下一文章，讲解实际的应用