移动端viewport的那点事儿

随着移动设备的发展与普及,用户在PC上的活跃度逐渐缩减,越来越多的网站都已经开始适配移动手持设备,刚好前些天也适配了几个移动端页面(好吧,其实是几个礼拜之前的事儿,掩面羞愧ing…),所以在这里稍作总结下

什么是 viewport

在显示面积上,移动设备比桌面显示器要小很多。比如一个960布局宽度的页面,放在 320px 宽度的手机上浏览,整个页面都缩小了,用户只能通过放大并且移动页面来浏览,这样的体验非常糟糕。我们希望移动设备上网页的显示能尽可能地接近桌面浏览器,于是就有了 viewport。viewport 由两部分组成,visual viewportlayout viewpor,也就是视觉窗口和布局窗口。 visual viewport就是浏览器当前显示的部分页面,可以通过拖动改变页面显示的部分,通过放大缩小改变 visual viewport 的大小。

layout viewport 就是提供给CSS计算的 viewport,相当于桌面浏览器的 viewport,不同的是 layout viewport 跟当前浏览器可视范围无关系,浏览器怎么缩放都与它无关,它是一个给定的值。 不同设备给 layout viewport 定了不同的默认值,宽度上大概是:Safari 980px,Opera 850px,Android Webkit 800px,IE 974px 这样提供给 css 计算的 viewport 宽高就与桌面浏览器相近了,页面计算渲染出来的效果跟桌面浏览器几乎一致。页面放大缩小不会影响到 layout viewport,也就是不会影响到页面渲染。

在移动浏览器上,所有页面打开时默认visual viewport = layout viewport,也就是最小缩放,例如用mobile safari打开一个页面,无论页面内容如何,都会显示980px宽度的内容。

viewport 基本语法与设置

1
2
3
4
5
6
7
8
9
10
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
" />

针对响应式设计或是已经适配移动端的页面,大家通常这样设置:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

而非响应式网站,只需把layout viewpor设置为页面实际宽度即可,如果设置了initial-scale=1则会导致visual viewport100%渲染而不会自动缩放

1
<meta name="viewport" content="width=1024" />

最后提一下 width=device-width,字面意思应该是设备宽度,可实际上在大多数浏览器中都是给了一个定值:320px。这个值应该是源于 苹果,早期 iPhone 的分辨率为 320px × 480px,大量为 iPhone 量身定制的网站都设置了width=device-width,并且按照宽度 320px 来设计制作,所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px。