css自定义属性--dpr无法自动同步window.devicepixelratio，因其是静态声明、非运行时响应式变量；必须通过js在页面加载、横竖屏切换等时机动态注入，且需配合viewport设置确保css像素与物理像素对齐。
为什么不能直接用 --dpr 存 devicePixelRatio
CSS 自定义属性是静态的，--dpr 写死在 :root 里就永远不变。哪怕用户从 iPhone 切到 iPad、横竖屏切换、甚至系统缩放调高，--dpr 都不会自动更新。浏览器也不提供任何 CSS 原生方式读取 window.devicePixelRatio —— 它纯属 JS 运行时值。
怎么让 --dpr 真正“动态”起来
必须靠 JS 注入，且要覆盖关键时机：
- 页面加载时立即设置：
document.documentElement.style.setProperty('--dpr', window.devicePixelRatio || 1) - 监听
resize和orientationchange（部分安卓设备旋转时 DPR 可能变） - 监听
matchMedia('(resolution: ...)').addEventListener更精准，但兼容性差，不如直接重设 - 注意：Safari 在 PWA 模式下可能缓存 DPR，需加
setTimeout(..., 0)延迟执行确保取到最新值
@media 查询和 --dpr 怎么配合用
媒体查询本身不能读变量，但可以和 JS 注入的 --dpr 协同工作：
- 媒体查询用于粗筛（比如只对
min-resolution: 2dppx设定默认--scale值） -
--dpr用于精细控制，比如border-width: calc(1px / var(--dpr))实现物理像素级边框 - 别把
@media当--dpr的替代品——它匹配的是“DPR ≥ 2”，不是精确值；而 JS 获取的是真实浮点数（如 2.8） - 如果用
calc(1px / var(--dpr))，记得给--dpr设 fallback：:root { --dpr: 1; }，否则未 JS 注入时计算会失效
容易被忽略的缩放陷阱
很多人以为设了 --dpr 就万事大吉，其实真正麻烦的是 viewport 缩放不一致：
- iOS Safari 默认把高 DPR 屏幕的 CSS 像素“压缩”进物理像素，但 Android Chrome 行为不同
- 必须同步设置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">，否则--dpr和实际渲染错位 - 伪元素高清边框（
::after+transform: scaleY(0.5)）依赖的是媒体查询结果，和--dpr无关——这两套逻辑常被混用，但底层机制完全不同 - 如果你用
--scale做大屏缩放，--dpr必须参与所有尺寸计算链，比如font-size: calc(14px * var(--scale) / var(--dpr))，否则高 DPR 下文字会过粗
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
