WebAPP开发之viewport的深入理解

平常移动端开发中，页面的head中都会引入下列这句话，那Viewport是什么，理解了这个才能让我们开发的网页更好适配不同的移动设备。

[html] view plain copy

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

Viewport是手机屏幕上能用来显示我们的网页的那一块区域。但是viewport并不等于浏览器的可视区域。可以自定义，自定义后，手机按这个尺寸的比例在可视区域缩放。

 手机的默认Viewport多大？手机屏幕可视区域区域有多大？

可能大家想到，应该是手机的分辨率！其实不是，大家都知道现在手机的分辨率参数，像iPhon 5S  1136*640，也就是说宽是640，iPhone6Plus是750，Android的也大概320到700多，那常用的PC屏幕分辨率一般1366*768，手机那么小的屏幕，怎么会有那么多的可显示区域。据说手机上为了获得更高的清晰度，有投影还是什么。

其实真实的设备可视区域像素宽度device-width，像iPhone5S，是320px，iPhone6Plus是375px，Android手机大多数是360px或348px和320px。

 大多数手机默认的viewport为980，若不加那句话，手机会按viewport为980来显示网页。如果咱们按640比例开发的网页，会变小。

 页面显示时，页面会根据设置的viewport放大或缩小屏幕，比如页面按宽为640px开发的页面，那放在viewport设置320的屏幕上，会放大一倍。

 平常开发中，如果Viewport设置为device-width，最好按320PX开发。但是像图片，为了防止虚化，真实尺寸最好大一些。

 各个参数说明

width	设置layout viewport  的宽度，为一个正整数， 或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许， yes代表允许

 参考：http://www.cnblogs.com/2050/p/3877280.html（描述的很详细）