移动端viewport的那点事儿

发表于 分类于

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

什么是 viewport

在显示面积上，移动设备比桌面显示器要小很多。比如一个960布局宽度的页面，放在 320px 宽度的手机上浏览，整个页面都缩小了，用户只能通过放大并且移动页面来浏览，这样的体验非常糟糕。我们希望移动设备上网页的显示能尽可能地接近桌面浏览器，于是就有了 viewport。viewport 由两部分组成，visual viewport 和 layout 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。