CSS变量无法修复Retina屏border变粗问题，可靠方案是用--dpr变量配合transform:scale(calc(1/var(--dpr)))+伪元素，需注意兼容性、盒模型、transform-origin及真机渲染陷阱。
直接用 border: 1px 在 Retina 屏上必然变粗，CSS 变量本身不能“修复”这个问题，但能帮你把缩放逻辑从一堆媒体查询里解耦出来，让适配更可控、更易维护。
为什么不能只靠 --border-width: 0.5px
看似最省事：定义变量再用 border-width: var(--border-width)。但问题在于——
-
0.5px在 iOS Safari 13+ 和 Chrome 50+ 支持，但在多数安卓 WebView（如 UC、QQ 浏览器旧版）中会被忽略或向上取整为1px -
0.333px在 DPR=3 设备上根本不会被解析，CSS 引擎直接丢弃该声明 - 即使 JS 检测到
window.devicePixelRatio === 3，硬塞0.333px也大概率失效，不是浏览器不认，是底层渲染引擎不支持子像素边框
用 calc(1 / var(--dpr)) 控制 transform: scale()
真正可靠的路径是：用 CSS 变量存设备像素比，再在 transform 中动态算缩放值。前提是目标环境支持 calc() 在 transform 里使用（iOS 15.4+、Chrome 90+）。
- JS 初始化时读取
window.devicePixelRatio，四舍五入取整：Math.round(window.devicePixelRatio) - 注入 CSS 变量：
document.documentElement.style.setProperty('--dpr', dpr) - CSS 中写：
transform: scale(calc(1 / var(--dpr)))，配合伪元素和transform-origin: 0 0 - 旧版 Safari（iOS 12–15）必须加
-webkit-transform前缀，否则缩放不生效
伪元素尺寸和 box-sizing 必须显式声明
缩放值再准，如果伪元素盒模型没约束，照样错位或露白。
立即学习“前端免费学习笔记（深入）”；
- 单边边框（如下边框）：伪元素用
height: 1px+background-color，别用border-bottom: 1px—— 后者缩放后边缘易模糊，且受box-sizing干扰 - 四边边框：伪元素设
width: 200%、height: 200%、box-sizing: border-box，否则默认content-box会让边框外扩 -
transform-origin必须写成0 0（左上角），不能只写top left或left top—— 部分 Safari 版本对关键字解析不稳定 - 父元素必须有
position: relative，否则伪元素定位脱标
安卓 WebView 和真机调试的隐藏陷阱
你写的代码在 Chrome DevTools 里看起来没问题，但真机上可能完全失效——原因往往不是逻辑错，而是渲染层细节没对齐。
- 滚动容器中边框消失？加
transform: translateZ(0)或will-change: transform强制图层提升，避免被overflow: hidden裁掉 - 点击穿透失败？伪元素必须加
pointer-events: none，否则安卓 WebView 下会拦截 touch 事件 - 圆角边框变形？
border-radius只能写在父元素上，伪元素只负责颜色块，否则缩放会拉伸圆角 - DPR 动态变化（比如横竖屏切换）时，JS 注入的变量不会自动更新，需监听
resize或orientationchange重新设置
真正麻烦的从来不是怎么写 scale，而是缩放后坐标系是否对齐、图层是否被裁、交互是否被拦——这些点不连真机反复测，光看文档根本发现不了。
