css 无法直接获取 devicepixelratio，需用 @media (-webkit-min-device-pixel-ratio: n), (min-device-pixel-ratio: n) 匹配 dpr≥n 的设备，并配合 transform 缩放伪元素实现高清边框；自定义属性 --dpr 需 js 动态注入，且必须配合 js 设置 viewport 缩放才能确保 css 像素与物理像素对齐。
怎么用 CSS 媒体查询识别不同 DPR
浏览器不提供直接读取 devicePixelRatio 的 CSS 变量，但可通过 @media 查询 min-device-pixel-ratio 或 -webkit-min-device-pixel-ratio 捕获设备像素比。注意：该值是浮点数，且各浏览器解析精度不同（Chrome 对 1.5 支持较好，部分安卓原生浏览器只认整数）。
常见写法：
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
.border-1px::after {
transform: scaleY(0.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.border-1px::after {
transform: scaleY(0.333);
}
}
- 必须同时写两套条件，兼顾 Safari/Chrome（
-webkit-前缀）和 Firefox/现代标准（无前缀） -
min-device-pixel-ratio: 2匹配 DPR ≥ 2 的设备，不是“等于 2”，所以 DPR=3 也会命中该规则 - 不要用
max-device-pixel-ratio做排除——它在 iOS Safari 中行为不稳定，容易漏匹配
CSS 里能不能存一个动态 DPR 变量
不能。CSS 自定义属性（--dpr）是静态的，无法自动同步 JS 中的 window.devicePixelRatio 值。你写 :root { --dpr: 2; }，这个值不会随设备切换或横竖屏旋转而更新。
如果硬要“模拟”变量行为，只能靠 JS 注入：
const dpr = window.devicePixelRatio || 1;
document.documentElement.style.setProperty('--dpr', dpr);
然后在 CSS 中使用：
.hairline::after {
height: calc(1px / var(--dpr));
transform: scaleY(calc(1 / var(--dpr)));
}
-
calc()支持变量参与运算，但仅限于数值型，且不能用于媒体查询条件 -
calc(1px / var(--dpr))在 DPR=2 时等价于0.5px，但如前所述，0.5px在多数安卓浏览器中会被四舍五入为1px，实际不可靠 - 该方式需确保 JS 执行早于 CSS 计算（通常放在
中或用document.write注入），否则初始渲染会 fallback 到未定义值
为什么直接设 0.5px 边框不推荐
因为浏览器对亚像素的处理逻辑差异极大：
- Chrome（桌面 & Android）：把
当作 <code>0，≥ 0.5px四舍五入成1px - iOS Safari：能渲染
0.5px，但仅限于某些渲染路径（如border），height或margin仍可能被修正 - Firefox：对
0.55px以上才向上取整，但移动端兼容性弱
所以，依赖 0.5px 的方案在跨机型测试中极易失效。真正稳定的做法是：用伪元素画出 1px 高度，再用 transform: scaleY() 缩放——缩放操作发生在合成层，不触发亚像素重采样。
JS 动态注入 viewport 是唯一可靠起点
所有 CSS 层面的 DPR 适配，都建立在一个前提上：页面的 CSS 像素与物理像素比例关系是已知且可控的。而这个关系由 <meta name="viewport"> 的 initial-scale 决定。
正确做法是用 JS 获取 window.devicePixelRatio 后，立即生成并插入 viewport meta 标签：
const dpr = window.devicePixelRatio || 1;
const scale = 1 / dpr;
const meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`;
document.head.insertBefore(meta, document.head.firstChild);
- 必须插在
最前面，否则 iOS Safari 可能忽略 - 不要覆盖已有 viewport 标签，而是先移除再插入，避免双 meta 冲突
- 该操作只解决“缩放基准”，后续仍需配合 rem/vw 单位或媒体查询做尺寸适配——否则字体、间距仍会因 DPR 不同而失真
DPR 不是开关，而是连续变量；所谓“适配”，本质是让 CSS 像素尽可能贴近物理像素的意图表达。最易被忽略的是：viewport 缩放后，1rem 对应的物理像素数变了，但设计稿基准（如 375px 宽）没变——这要求所有尺寸单位必须基于视口宽度动态计算，而不是写死 font-size: 100px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
