移动端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 | <meta name="viewport" |
针对响应式设计或是已经适配移动端的页面,大家通常这样设置:
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。