border: 1px 在 retina 屏变粗是因 dpr 导致 css 像素映射多个物理像素；0.5px 兼容性差；::after + scaley(0.5) 是最可靠方案，但需 position: relative、transform-origin: 0 100%、pointer-events: none 等条件。
直接写 border: 1px 在 iPhone、iPad Pro 等 Retina 屏上变粗，不是你写错了颜色或漏了 box-sizing，而是浏览器按规范把 1 个 CSS 像素映射到了多个物理像素——window.devicePixelRatio（DPR）在起作用。
为什么 border: 1px 在 DPR ≥ 2 设备上必然变粗
DPR = 物理像素 / CSS 像素。iPhone 6–8 是 DPR=2，iPhone 14 Pro 是 DPR=3。这意味着：
-
border: 1px不是“画一条 1 物理像素的线”，而是“占满 1 个 CSS 像素格子”；DPR=2 时，这个格子宽高各占 2 物理像素，边框自然渲染为 2×2 像素块 - 浏览器不降采样、不抗锯齿优化，结果就是发虚 + 加粗，和设计稿对不上
- 这不是 bug，是设备渲染逻辑的必然表现
border: 0.5px 为什么基本不能用
看似最直觉的解法，实际兼容性极差：
- iOS 8+ Safari 支持
border: 0.5px，但 iOS 12 之前、多数安卓 WebView 直接忽略该声明，或四舍五入为1px -
border: 0.333px在 DPR=3 设备上常被 CSS 解析器丢弃——它根本不会生效 - 在 flex/grid 容器中，非整数
border-width可能触发重排或尺寸抖动 - 媒体查询如
@media (-webkit-min-device-pixel-ratio: 2)只能区分 DPR≥2，无法适配 DPR=3 的缩放精度
::after + transform: scaleY(0.5) 的最小可靠写法
这是目前兼容性最好、纯 CSS、不干扰布局的方案，本质是“画一个 2px 高的色块，再压缩到视觉 1px”。但漏掉任一条件就会偏位或失效：
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body -
::after用height: 1px+background-color，别用border-bottom: 1px——后者缩放后易模糊，且受box-sizing干扰 -
transform-origin必须显式写成0 100%（即 left bottom），只写bottom在 iOS 12–15 Safari 中会失效 - 务必加
pointer-events: none，否则某些安卓 WebView 下点击会被伪元素拦截 - iOS 12–15 需同时写
-webkit-transform: scaleY(0.5)和-webkit-transform-origin: left bottom
圆角、滚动容器和 overflow: hidden 下的常见翻车点
伪元素方案失效，往往不是缩放逻辑错了，而是渲染坐标系没对齐：
- 圆角边框：把
border-radius写在父元素上，::after只负责画色块；否则缩放后圆角变形 -
overflow: hidden容器里边框消失？因为width: 200%缩放前已被裁掉——解决办法是给父容器加transform: translateZ(0)或will-change: transform强制图层提升 - 四边边框需设
width: 200%; height: 200%+border: 1px solid #000+transform: scale(0.5)+transform-origin: 0 0+box-sizing: border-box，否则边框外扩或错位
真正难的不是写出一段能跑的代码，而是让 transform-origin 对齐、让图层不被裁、让不同 DPR 设备下都稳定渲染——这些细节不验证到真机，很容易上线才发现边框歪了或点不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
