移动端开发之viewport

参考了很多资料，说说自己对viewport的理解

viewport分visual viewport和layout viewport，visual viewport可以理解为移动设备屏幕的可视区域，visual viewport的大小可以理解为就是品目可视区域的大小，而layout viewport则是存放我们的网页的。

为什么会有两个viewport？

因为早期的网页基本都是pc端的网页，而pc端的分辨率大大高于移动端的分辨率(这里移动端分辨率指的是移动端的物理像素)，所以为了能够使pc端的网页能够在移动端上正常显示，所以出现了layout viewport。而浏览器厂商一般将layout viewport初始化为宽度980px，当然也有的不是这个数字。

怎么让layout viewport能够在visual viewport中能够正常显示

这就是缩放因子initial-scale的工作了，initial-scale代表layout viewport与visual viewport的比值，既一个布局像素(css像素)代表几个物理像素，比如initial-scale=2则代表一个物理像素代表两个css像素；当我们没有设置meta的时候，浏览器会自动设置initial-scale，以便让layout viewport能够完全显示在visual viewport中而不会出现横向滚动条，比如你的移动设备物理像素宽度是360px，而layout viewport宽度为980px，则浏览器会自动将initial-scale设置为0.367346，以便不出现横向滚动条。这是3.67346个css像素才站一个物理像素的位置，所以刚好不会出现横向滚动条；当只设置了initial-scale而没有设置layout viewport的时候，浏览器也会自动设置layout viewport，以时layout viewport刚好能在visual viewport中显示，比如initial-scale=2，你的visual viewport是360px的时候，浏览器会自动将layout viewport宽度设置为720px，因为此时一个css像素等于两个物理像素的宽度，所以layout viewport刚好能在visual viewport中显示完全而不出现滚动条。

怎么设置layout viewport的宽度

这就是缩放因子width的工作了，width可以设置为任意的大小或者device-width

width和initial-scale都存在时怎么办

浏览器会设置layout viewport宽度是两者单独存在时计算的layout viewport较大的那一个，因此此时时可能出现横向滚动条的，比如你的visual viewport是360，你设置width=720px,initial-scale=1此时layout viewport大于visual viewport而且一个css像素跟一个物理像素是一样的，所以会出现横向滚动条

ideal viewport

让layout viewport的宽度和visual viewport的宽度相等，并且让1个css像素等于1个物理像素，这就是移动端的最佳viewport，即

<meta name="viewport" content="width=600,initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no"/>

其他属性

maximum-scale：最大缩放因子

minimum-scale：最小缩放因子

user-scalable：是否允许用户进行手动缩放

height：layout viewport的高度，这个属性基本没有用处

参考链接

http://www.cnblogs.com/2050/p/3877280.html
http://blog.doyoe.com/2015/10/20/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%BA%8C%E5%BC%B9%EF%BC%9A%E5%96%84%E7%94%A8meta/#more