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 计算出来。