Meta&Viewport
1 ViewPort 相关属性
| 属性名 | 取值 | 描述 |
|---|---|---|
| width | 正整数或device-width | 定义视口的宽度，单位为像素 |
| height | 正整数或device-height | 定义视口的高度，单位为像素，一般不用 |
| initial-scale | [0.0-10.0] | 定义初始缩放值 |
| maximum-scale | [1.0-10.0] | 定义放大最大比例，它必须小于或等于maximum-scale设置 |
| minimum-scale | [0.0-1.0] | 定义缩小最小比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes / no | 定义是否允许用户手动缩放页面，默认值 yes |
| viewport-fit | auto/contain/cover | 全面屏(刘海屏)设置 |
2 注意事项
- viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的
- 即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放；ios上的Safari浏览器也是无效的
3 width 与 initial-scale 冲突
布局视口在 width 与 inital-scale 产生分歧时会选择他们中比较大的那一个。
4 完美视口
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit:cover" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit:cover">
如果你页面中存在太大的元素，你的meta标签只使用 width=device-width，initial-scale=1.0 中的一个，有些浏览器会扩展布局视口的宽度来容纳这个元素，这里的兼容性很复杂，但你两个都使用了，大部分浏览器都不会改变布局视口了.