Table of Contents
在进行自适应网页的编写时,基本都会用到 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。
除了 window.innerWidth,也看一下 window.screen.width 和 window.devicePixelRatio。window.screen 是用户屏幕信息,这个信息实际上是系统提供的。屏幕宽度(screen.width)乘以设备像素比(devicePixelRatio)就是屏幕的物理像素宽度(1080)。
这里的 360 是安卓为了解决不同像素密度手机显示不一致提供的相对像素,这个值是可以在开发者选项里修改的。比如我这里修改成了 320。
修改系统宽度之后,window.screen.width 和 window.devicePixelRatio 也相应的改变了。
指定 viewport
为了让移动端页面可以正确的展示,当然就不能让 viewport 是默认的 980。比如,指定为 360:
<meta name="viewport" content="width=360">
设置了 viewport 的宽度后,浏览器将以指定宽度布局渲染,上面的文字也达到了正确/预期的显示效果。如果页面需要按照特定的宽度写,那么 viewport 的 width 写死就可以了,但如果要适配 320、360、414 等不同的设备宽度,最好是写成 device-width:
<meta name="viewport" content="width=device-width">
除了 width,一般还会设置四个属性:
属性 | 值 | 描述 |
---|---|---|
minimum-scale | 0.0~10.0 之间的数值 | 最小缩放系数 |
maximum-scale | 0.0~10.0 之间的数值 | 最大缩放系数 |
initial-scale | 0.0~10.0 之间的数值 | 初始缩放系数 |
user-scalable | yes/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 计算出来。