移动端开发之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