直接写border: 1px在高DPR设备上必然变粗，是因DPR导致1 CSS像素映射为2或3物理像素；必须用::after伪元素+height: 1px+background+transform: scaleY(0.5)+transform-origin: 0 100%+pointer-events: none绕过浏览器默认渲染逻辑。
直接写 border: 1px 在 iPhone、iPad 或高 DPR 安卓机上必然变粗，这不是 CSS 写错了，是 window.devicePixelRatio（DPR）导致的物理渲染结果：DPR=2 时，1 个 CSS 像素占 2 个物理像素；DPR=3 时占 3 个。想“看起来是 1px”，必须绕过浏览器对 border 的默认映射逻辑。
为什么不能直接用 border-width: 0.5px
看似最直觉，实则兼容性极差：0.5px 在 iOS Safari 13+ 才开始有限支持，多数安卓 WebView（如 UC、QQ 浏览器）会直接忽略或四舍五入为 1px；0.333px 更是普遍被解析器丢弃。实测中 getComputedStyle(el).borderWidth 仍返回 "1px"。这不是加前缀能解决的问题，是渲染引擎底层限制。
::after + transform: scaleY(0.5) 的落地细节
这是目前兼容性最好、可控性最强的纯 CSS 方案，核心不是“缩边框”，而是“画一个 2px 高的条，再压缩到视觉 1px”。漏掉任一条件都会错位或失效：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after必须用height: 1px+background-color，别用border-bottom: 1px——后者缩放后易模糊、受盒模型干扰 -
transform-origin必须显式写成0 100%（即left bottom），Safari 和部分安卓 WebView 对默认值解析不一致，不写就会上浮露白 - 必须加
pointer-events: none，否则伪元素可能拦截点击，尤其在列表项或按钮中 - iOS 12–15 需加
-webkit-transform和-webkit-transform-origin前缀，无前缀属性支持不稳定
如何适配 DPR=3 设备（如 iPhone 14 Pro）
scaleY(0.5) 在 DPR=3 下实际只缩到 1.5 物理像素（1px × 2 × 0.5 × 3 = 3 → 渲染为 1.5px），仍非整数像素，Safari 渲染会插值发虚。硬写媒体查询兜底有风险：
- @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) 内覆盖
transform: scaleY(0.333)，但 Safari 对该值子像素渲染不稳定 - 更推荐 fallback 到
box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)模拟下边框，或background: linear-gradient(to bottom, #ccc 50%, transparent 50%) - 若用 JS 动态注入，应读取
window.devicePixelRatio后计算scale(1 / dpr)，再写入style或切换 class，而非依赖构建时静态媒体查询
真正容易被忽略的是：缩放后的伪元素如果没设 pointer-events: none，某些安卓 WebView 下 touch 事件会丢失；transform-origin 写成 left bottom 而非 0 100%，真机上就可能抬高半像素——这些细节不连真机调试根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
