viewport 移动端自适应

在进行自适应网页的编写时,基本都会用到 viewport meta 标签,内容也基本是编辑器或者框架生成的,不会去修改。

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

这里探究一下为什么这样写,为什么 width 要是 device-width。

一般来说,web 端的网页都比较宽,显示的内容也多。但到了移动端,虽然移动端的屏幕像素可能也很多——1080,但浏览器给开发者提供的布局视口(layout viewport)宽度并不是 1080。

不指定 viewport

在没用写 viewport meta 的情况下,默认是 980。这个值是苹果确定的(viewport 概念是苹果提出的),其他浏览器为了兼容,也设为了 980。

默认 viewport 宽度

除了 window.innerWidth,也看一下 window.screen.width 和 window.devicePixelRatio。window.screen 是用户屏幕信息,这个信息实际上是系统提供的。屏幕宽度(screen.width)乘以设备像素比(devicePixelRatio)就是屏幕的物理像素宽度(1080)。

这里的 360 是安卓为了解决不同像素密度手机显示不一致提供的相对像素,这个值是可以在开发者选项里修改的。比如我这里修改成了 320。

修改系统宽度
系统宽度320

修改系统宽度之后,window.screen.width 和 window.devicePixelRatio 也相应的改变了。

指定 viewport

为了让移动端页面可以正确的展示,当然就不能让 viewport 是默认的 980。比如,指定为 360:

<meta name="viewport" content="width=360">
viewport360

设置了 viewport 的宽度后,浏览器将以指定宽度布局渲染,上面的文字也达到了正确/预期的显示效果。如果页面需要按照特定的宽度写,那么 viewport 的 width 写死就可以了,但如果要适配 320、360、414 等不同的设备宽度,最好是写成 device-width:

<meta name="viewport" content="width=device-width">

除了 width,一般还会设置四个属性:

属性描述
minimum-scale0.0~10.0 之间的数值最小缩放系数
maximum-scale0.0~10.0 之间的数值最大缩放系数
initial-scale0.0~10.0 之间的数值初始缩放系数
user-scalableyes/no是否允许用户缩放

一般设置 initial-scale 就可以了。不允许用户缩放对于视力不好的用户不友好。

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

viewport 具体怎么写要考虑具体场景,比如当我只有一套 ui,却要适配 320~414 的手机的时候,最快的方式就是写死 viewport 的宽度。

还有就是当 pc 端的看板需要到安卓电视上显示的时候,这时我会将 initial-scale 设置成 devicePixelRatio 的倒数,并且禁止缩放。

<meta name="viewport" content="width=device-width, initial-scale=0.33, user-scalable=no">

上面只是示例代码,具体的倒数要通过 js 计算出来。