一般情况下，移动端浏览器默认宽度980px。viewport的meta标签中设置width=device-width，则页面宽度为设备宽度（逻辑像素值）
物理像素/设备独立像素
- 物理像素：通常说的手机分辨率
- 设备独立像素/逻辑像素：css像素。
- 设备像素比（dpr）：物理像素/逻辑像素
- 3个视口
- layout viewport 布局视口。通过document.documentElement.clientWidth获取。包括其 padding (不包括 borders, margins 或垂直滚动条，如果有的话）。
不缩放时，布局视口宽度=视觉诗口宽度/dpr。 - visual viewport 视觉视口。通过window.innerWidth获取。包括垂直滚动条，如果有的话。就是常说的分辨率的值。
- ideal viewport 理想视口。能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适
- 属性和值。⚠️缩放比例是相对于ideal viewport进行的。
visual viewport = ideal viewport / 缩放比例
| 属性 | 值 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数，相对于ideal viewport的宽度进行缩放。 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
| viewport-fit | auto、contain、cover。一般设置为cover，比较新的手机由于有刘海或者水滴，造成安全区域比屏幕小。设置为cover，可以使页面填充整个屏幕 |
