最稳妥方案是伪元素+transform缩放：通过::after/::before创建边框并用scaleY(0.5)等缩放至1物理像素，配合transform-origin和pointer-events: none实现兼容性与交互友好。
为什么直接用 --scale 变量控制缩放不灵？
因为 transform: scaleY(var(--scale)) 在 CSS 中不支持变量插值——CSS 自身无法在 transform 里动态计算缩放值，var(--scale) 会被当作无效值丢弃。你写的 --scale: 0.5 看似合理，但浏览器根本不会解析它。真正起作用的必须是 JS 注入的内联样式，或通过媒体查询硬编码的规则。
devicePixelRatio 怎么安全映射到 CSS 变量？
不能直接把 window.devicePixelRatio 原样塞进 :root，它可能为 2.83 这类非整数，而缩放值需精确匹配物理像素（比如 DPR=2 → scale(0.5)，DPR=3 → scale(0.333)）。更稳妥的做法是做离散映射：
- 用
Math.round(dpr)或Math.min(3, Math.max(1, Math.round(dpr)))限定为 1/2/3 - 按映射表写死：
1 → 1，2 → 0.5，3 → 0.333 - 用 JS 设置
document.documentElement.style.setProperty('--hairline-scale', value) - 配合伪元素使用：
transform: scaleY(var(--hairline-scale));（此时变量已由 JS 注入，有效）
四边框用 scale(0.5) 为什么圆角会塌？
因为 border-radius 是基于原始尺寸计算的，放大再缩放后，圆角弧度被等比压缩，视觉上变尖甚至消失。常见错误是这样写：
.border-all::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 200%; height: 200%;
border: 1px solid #000;
border-radius: 4px; /* 错！这里仍按200%尺寸算圆角 */
transform: scale(0.5);
}正确解法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 把
border-radius移到宿主元素上，并设overflow: hidden（靠裁剪实现） - 放弃单伪元素四边方案，改用四个独立伪元素（
::before+::after+ 两个额外div），每个只负责一条边、各自控制border-radius
伪元素边框被遮挡或点不中？
这是最常被忽略的交互陷阱。伪元素默认会拦截鼠标事件，即使它只是画条线：
- 必须加
pointer-events: none，否则按钮点击失效、input 无法聚焦 - 如果伪元素需要响应点击（比如可点击边框区域），就不能设
pointer-events: none，得换方案：用box-shadow或 SVG 边框 -
z-index不解决根本问题——伪元素层级再低，只要盖住内容且没禁 pointer-events，照样吞事件 - 测试时务必在真机上点按，模拟器可能不触发真实事件穿透逻辑
实际项目里，--hairline-scale 只是辅助手段，核心逻辑仍在 JS 判断和伪元素定位细节。别指望一个变量一劳永逸，DPR 适配的本质是「在不同像素密度下，让 CSS 像素输出恰好 1 个物理像素」，这需要渲染层、布局层、事件层三者协同，漏掉任一环，1px 就只是看起来像而已。
