对于viewport的理解

参考文章：http://www.cnblogs.com/2050/p/3877280.html

以下观点是我根据上面这篇文章的理解并做的图文解释，如有错误，还望指教

对于viewport的理解，我认为可以分成4层,最底层是，实际的网页，也就是网页内容的宽度，比如给网页的1个最完成的元素定义了一个1360px的像素，第然后就到layout viewport层，假设他的默认值是980px；，然后到visual viewport层，这层的默认值是ideal viewport 的大小。最后一层是ideal viewport，它在iPhone中是320px,在安卓中数值不等，不过都差不多。

对于<meta name="viewport" content="width=device-width,initial-scale=1" >

width指的是layout的宽度，而initial-scale指的是/ideal viewport/visual viewport。

具体的取值是这样的：

首先，

❶ 由layout viewport去区网页中的内容，layout viewport指的是 网页中的document.documentElement.clientWidth或者是document.body.clientWidth的大小,同时也是@ media screen (min-width:980px) 中的media 中的width所指的screen。

❷因此他的宽度（不管市默认还是指定），就相当于在电脑上的浏览器的宽度值一样，因此该层所看到的内容就像在浏览器上同样宽度时所看到的内容。

❸ 在meta标签中的width和initial-scale都可以控制他的宽度,如文章所说。initial-scale是相对于ideal viewport的宽度的，当initial-scale的值为0.5的时候，宽度是ideal viewport的两倍，也就是说 layout viewport/initial viewport =ideal viewpor。

其次，

❶ visual viewport 同样会根据 initial-scale 去确定自己得宽度，因此当显示地申明了 initial-scale 的时候，visual viewport的宽度就会等于 layout viewport的宽度，此时就不会出现任何的滚动条，但是如果没有显示申明initial-scale的时候，当visual viewport的宽度小于 layout viewport 宽度时，那么layout viewport 上的图层在visual viewport上面显示地时候就会出现滚动条。

最后，

❶ ideal viewport的宽度是固定的，visual viewport 要把他带上的根据initial-scale扩大或缩小到ideal viewport的宽度上，以让我们可以看到visual viewport上的所有内容。

PS：重申一点，layout viewport上的宽度所看到的内容是不带滚动条的可视部分，而visual viewport上所看到的内容可以带滚动条，但也只是layout viewport上所看到的内容。