HTML5之Viewport详解

做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们.

关于HTML5中Viewport的文章Google,百度一搜有很多.记录一些自己理解的内容:

Viewport属性详解

Viewport:字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出)这样利于移动 web 站点跨设备显示效果基本一致.

基础写法:

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

参数解释:

width 控制Viewport的宽度,可以指定一个值或者设备的宽度,如device-width为设备的宽度(单位为设备缩放比例1:1的像素),这里设置的宽度等于设备宽度;

initial-scale 初始缩放,即页面初始缩放程度.对应的值是一个浮点值,这里是一个乘积关系,页面呈现大小等于设置的宽度乘以initial-scale的值;

maximum-scale 最大缩放,即允许用户缩放的最大比例,也是乘积关系.一般设置为1:1的比例不会让用户缩放的;

minimum-scale 最小缩放,如上;

user-scalable 用户是否可以手动缩放,一般值设为no,不允许用户缩放;

这段代码的大意是让viewport的物理宽度等于设备的分辨率,不允许用户缩放.

第一次接触移动web的时候不知道该怎么做,就去看天猫的移动站的 view-source 研究了几个小时复制了这一段代码然后开始写第一个webapp了.

这种写法是还原设计稿,让页面保持和设备分辨率一样,不做任何缩放.对于移动web来说需要丰富经验支持才能写好一个好的响应式页面.高质量的页面效果请选择此方案.

特殊写法:

<meta name="viewport" content="target-densitydpi=device-dpi,width=640" >

简单而粗暴的解决响应式方案,不过弊端也比较大需要谨慎衡量.

target-densitydpi 这个属性可以改变设备的默认缩放medium-dpi是target-densitydpi的默认值,如果我们显式定义target-densitydpi=device-dpi,那么设备就会按照真实的dpi来渲染页面.

如果设计稿是按照640px宽度设计的话,制作页面的时候就按照设计稿的原始尺寸制作,页面会默认缩放和手机分辨率一样的宽度显示.会节省很多解决响应式问题的时间.

优点这么突出那么弊端呢,当然也很突出:

对于高密度和超高密度的手机设备,页面(特别是图片)会失真,而且密度越多,失真越厉害.
对于Android这么强大的阵营面前,设备都数不清了更别说设备自带的浏览器.web页面会呈现不是满屏显示的情况,右边会出现留白很怪异.

对于第二点我没有找到完美的解决办法.出现这情况可能是target-densitydpi和device-dpi设备DPI之间的换算.选择此方案需要放弃部分用户,所以要衡量得失.(简单而粗暴是有代价的,任需谨慎...)

小结

了解完Viewport对写移动web来说简单了很多,要做的只是拿出实际行动多写了.对于Viewport两种写法可以灵活运用,要做到的是以最精简的HTML、CSS完成页面呈现.

补充

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

minimal-ui iOS 7.1的Safari新增的属性在浏览网页，滚动之后，会触发隐藏 location bar 和 tool bar,但是在iOS 8又给删除了.