DPR、PPI的概念
DPR
一个CSS逻辑像素（1px）包含的物理像素值。
通过window.devicePixelRatio获得当前屏幕的DPR；
- DPR = 1，1个逻辑像素 = 1个物理像素
- DPR = 2，1个逻辑像素 = 2 * 2个物理像素
- 保证在不同设备上CSS像素的实际显示尺寸一致（100px在手机和电脑上看起来一样大）
- 高DPR设备通过渲染更多的物理像素提升清晰度；
PPI
Pixels Per Inch 每英寸n个像素，1英寸 = 2.54cm。
举例：红米K70手机 像素3200（纵向物理像素值） * 1440（横线物理像素值），手机大小为6.67英寸（对角英寸数）
计算PPI公式
- PPI越高，屏幕显示越清晰
厂商的设定
主流设备厂商通常会根据屏幕的PPI调整DPR，以确保不同屏幕尺寸的设备上，逻辑像素的物理尺寸大致保持一致。
- 逻辑像素的物理宽度计算公式：
- 所以DPR/PPI的值需要保持在一定的范围内以确保逻辑像素的物理尺寸大致一致，这个界定值是0.00625（仅举例）
逻辑像素的计算
逻辑像素就是前端开发时最常使用的长度。
举例一个手机分辨率为3200（长） * 1440（宽），大小是6.67英寸，那么计算的PPI的值为526，在DPR分类标准中DPR应为4，才能保证逻辑逻辑像素在不同设备上的物理尺寸大概一致。
那么他的逻辑宽度应该是1440/4为360px。
屏幕的缩放
屏幕的缩放（手机端的双指放大、PC端浏览器的Ctrl+的操作）不会改变设备的PPI和DPR，但是会动态调整视口的视觉视口逻辑像素值
- 初始缩放比例为1，视觉视口宽度=390px，当缩放至200%时，视觉视口宽度=390/2 = 195px
- 屏幕缩放时会改变视觉视口的CSS像素值，布局视口的CSS像素值不会变
视口类型
布局视口
页面实际渲染的区域，通常大于屏幕物理尺寸，移动端默认980px，用于兼容未适配移动端的桌面网页。
用户可以通过meta设置移动端页面渲染区域（布局视口），通常设置为设备宽度（device-width）
页面中设置布局视口的大小
<!-- 专门针对移动端（手机、平板）的适配，浏览器可控制配置的属性是否生效，
设置布局视口大小核心代码width=device-width;
不允许布局视口的缩放 user-scalable=no, maximum-scale=1,minimum-scale=1;
初始视觉视口的缩放，不会影响布局视口的大小initial-scale=1;
当布局视口和视觉视口不等时，等比缩放页面以铺满视觉视口viewport-fit=cover; -->
<meta name=viewport
content="width=device-width,
user-scalable=no,
initial-scale=1,
maximum-scale=1,minimum-scale=1,
viewport-fit=cover">
视觉视口
用户当前可见的区域（即手机屏幕），受缩放操作的影响。缩放比例越大，视觉视口的CSS像素越小。
理想视口
当布局视口 = 布局视口时为理想视口。
