[原]WebAPP开发之viewport的深入理解
平常移动端开发中,页面的head中都会引入下列这句话,那Viewport是什么,理解了这个才能让我们开发的网页更好适配不同的移动设备。
<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(描述的很详细)