width=device-width 使 layout viewport 宽度等于设备逻辑像素宽度（如 iPhone 13 的 390px），而非物理像素宽度（1170px），配合 initial-scale=1.0 锚定 CSS 像素与逻辑像素对应关系，确保响应式渲染准确。
viewport 的 width=device-width 是怎么把物理像素映射成逻辑像素的
它不是“转换”，而是告诉浏览器：别按默认规则把整页缩成小字塞进屏幕，而是用设备的逻辑像素宽度（即 screen.width）作为 viewport 宽度。比如 iPhone 13 的物理像素是 1170×2532，但 screen.width 返回的是 390 —— 这个 390 就是它的逻辑像素宽度，也是 CSS 中 100vw 的基准值。
关键点在于：width=device-width 触发了浏览器对 viewport 的重设，让 layout viewport 宽度 = 设备的逻辑像素宽度，而不是物理像素宽度。没有这个 meta，浏览器会默认以物理像素宽度（如 1170px）为 viewport 宽度，导致页面被强行缩小、文字极小。
- 安卓部分机型（如某些三星旧款）
screen.width可能返回错误值，需配合window.devicePixelRatio校验 -
device-width是只读逻辑值，不随横竖屏旋转实时变化（横屏时仍为竖屏逻辑宽度） - 若设计稿基于 375px 宽（iPhone 6/7/8），而实际设备逻辑宽度是 414px（iPhone XR），仅靠
width=device-width不足以等比缩放，需额外缩放策略
initial-scale=1.0 为什么不能省略，它和 dpr 什么关系
initial-scale=1.0 的作用是锁定初始缩放比例，确保 1 个 CSS 像素（逻辑像素）在当前设备上对应 1/dpr 个物理像素宽度 —— 换句话说，它让 1px 在 CSS 中真正“看起来像 1px”，而不是被浏览器自动缩放拉伸或压缩。
省略它时，iOS Safari 会根据是否加了 width=device-width 做不同处理：没加则强制 scale=0.5 左右（模拟桌面缩放），加了但没写 initial-scale 时，某些 Android WebView 仍可能 fallback 到非 1 的 scale，导致字体模糊或布局错位。
-
initial-scale=1.0+width=device-width组合，才真正让1rem或1em的计算锚定在逻辑像素体系内 -
initial-scale值 ≠dpr；dpr 是设备固有属性（如 iPhone 14 Pro 是 3），scale 是渲染指令，两者无直接换算公式 - 设置
initial-scale=0.5会导致逻辑像素翻倍（1px CSS 占 2 个逻辑像素位置），极易引发布局溢出，慎用
为什么 1px 边框在 retina 屏上变粗，本质是逻辑像素与物理像素的面积映射偏差
CSS 的 1px 是逻辑像素单位，但在高 dpr 屏上，一个逻辑像素横跨多个物理像素。例如 dpr=2 时，1px 高度实际渲染为 2 个物理像素 —— 浏览器默认不做亚像素抗锯齿，直接填充，视觉上就“变粗”了。
这不是 bug，是渲染机制使然：CSS 像素定义的是“可寻址最小单元”，而非“最小可见线宽”。设计师给的 1px 线，指的是 1 物理像素粗细，而你写的 border: 1px solid #000 表达的是 1 逻辑像素粗细。
- 常见误操作：
transform: scaleY(0.5)压缩边框，但可能引发字体模糊、touch 事件偏移 - 更稳妥方案：用
border-image或background-image引入 1 物理像素宽的 SVG/Canvas 图，或使用 postcss 插件自动注入transform: scale(0.5)并修正 origin - 现代方案：CSS
border-width: 0.5px在 iOS 13+/Android Chrome 80+ 支持，但需确认目标用户 dpr 分布
user-scalable=no 会破坏逻辑像素的响应式基础，尤其影响微信内置浏览器
禁用缩放看似能防止用户乱操作，实则切断了用户对逻辑像素密度的主动调节权。微信内置浏览器（X5 内核）在禁用缩放后，会忽略部分 dpr 检测逻辑，导致 window.devicePixelRatio 返回错误值（如恒为 1），进而让高清图加载逻辑失效、rem 计算失准。
更隐蔽的问题是：当系统级“显示大小”被用户调大（Android 设置 → 显示 → 字体大小/缩放），user-scalable=no 会阻止页面响应这一系统级逻辑像素变更，文字直接溢出容器。
- 合规替代方案：用
touch-action: manipulation优化点击响应，而非禁用缩放 - 若必须锁定，至少保留
maximum-scale=1.0, minimum-scale=1.0，比user-scalable=no更兼容 X5 和 UC 内核 - 金融类 App 强制禁用缩放时，务必监听
resize和orientationchange，手动重算根字体大小并 force repaint
document.documentElement.style.fontSize = '50px' 的 rem 方案，在 Android 多数定制 ROM 上会失效。不如直接监听 visualViewport 的 width 变化来动态调整。 
