1px边框在iOS高DPR屏上偏粗，是因CSS逻辑像素被映射为2~3个物理像素导致；border:0.5px无效因浏览器不支持或四舍五入；伪元素+scaleY()方案需同时满足position:relative、pointer-events:none和精准transform-origin才可靠。
因为 1px 是 CSS 逻辑像素，而高分屏（如 iPhone、华为 Mate 系列）的 devicePixelRatio（DPR）为 2 或 3，浏览器会把 1 个逻辑像素强行映射到 2 或 3 个物理像素上，再通过插值渲染填充中间过渡色——你看到的“模糊”“发虚”“变粗”，本质是亚像素混合的结果，不是代码写错，也不是设备问题。
为什么 border: 0.5px 大概率失效
多数安卓 WebView 和旧版 Safari 不支持非整数 border-width；即使支持（如 iOS 8+），0.5px 在 DPR=3 设备上仍会渲染为 1.5 物理像素，照样模糊。Chrome/Firefox 在 DPR≠1 时会直接四舍五入成 1px 或丢弃该值。它只是“看起来细一点”，没解决物理像素对齐问题。
伪元素 + transform: scaleY() 必须配齐三要素
这是目前最可控的方案，但漏掉任意一项，边框就会断开、偏移、溢出或挡住点击：
- 父容器必须设
position: relative，否则::after定位失效 -
::after必须加pointer-events: none，否则拦截所有交互 -
transform-origin要匹配边框方向：下边框用left bottom，上边框用left top，否则缩放后线会偏移 0.5px
如何适配不同 devicePixelRatio 值
硬编码 scaleY(0.5) 只对 DPR=2 有效；DPR=3 必须用 scaleY(0.333)（不能写 1/3，CSS 不支持表达式）。媒体查询要分开写：
立即学习“前端免费学习笔记（深入）”；
@media (-webkit-min-device-pixel-ratio: 3) {
.border-b-hairline::after {
transform: scaleY(0.333);
}
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-resolution: 191dpi) {
.border-b-hairline::after {
transform: scaleY(0.5);
}
}
别用 JS 注入 class——首屏渲染前 JS 还没执行，白屏期边框就错了；也别给整个容器加 transform: scale()，会连文字和内边距一起缩，布局全乱。
真正起效的关键不在“画线”，而在缩放原点是否对齐、伪元素是否脱离文档流、以及 DPR 判断是否准确。这些细节一漏，真机上边框就断开或挡点击，调试时得连 Safari/Chrome DevTools 看渲染层，不能只靠模拟器。
