最稳妥方案是::after伪元素配合transform:scaleY(0.5)，必须同时设置transform-origin、position:relative和pointer-events:none，否则在高DPR设备上会偏移、遮挡点击或模糊；其原理是通过缩放将1px伪元素在dpr=2下映射为1物理像素。
直接用 transform: scaleY(0.5) + 伪元素是最稳妥的方案，但必须配齐 transform-origin、position: relative 和 pointer-events: none，否则在 iPhone 或高 DPR 安卓机上会偏移、遮挡点击或模糊。
为什么 border: 1px 在 iPhone 上看起来像 2px
因为 Retina 屏 devicePixelRatio 是 2，CSS 的 1px 被映射成 2 个物理像素。浏览器不支持 0.5px（仅 iOS Safari 8+ 有限支持，且需配合 -webkit-appearance: none），硬写会回退到 1px，起不到作用。
常见错误现象：
-
border: 0.5px solid #ccc在大部分安卓机上无效，渲染仍为 1px - 伪元素没设
content: ""，导致边框不出现 - 父元素没加
position: relative，::after脱离文档流后定位错乱
.hairline() Mixin 的最小可用实现
Less 中封装一个可复用的边框 mixin，比手写每个 ::after 更可靠。关键是把缩放逻辑、定位和防交互干扰收口。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一用
position: relative触发包含块，避免父级overflow: hidden剪掉伪元素 -
transform-origin必须按方向设：下边框用0 100%，上边框用0 0，左边框用0 0，右边框用100% 0 - 加
pointer-events: none，否则伪元素会拦截点击事件 - 为兼容旧 iOS，补
-webkit-transform
示例（仅底部边框）：
.hairline-bottom(@color: #e5e5e5) {
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: @color;
transform: scaleY(0.5);
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
pointer-events: none;
}
}
如何适配 dpr=3 设备（如华为 Mate 系列、三星 S23）
硬编码 scaleY(0.5) 只对 dpr=2 有效。dpr=3 需要 scaleY(0.333)，但不能靠 Less 运行时读取 window.devicePixelRatio —— Less 是编译时预处理器，没有 JS 执行能力。
可行路径只有两条：
- 构建时注入变量：通过 Webpack/Vite 插件传入
@dpr: 3，mixin 内写transform: scaleY(1 / @dpr) - 用媒体查询兜底：
@media (-webkit-min-device-pixel-ratio: 3)单独覆盖transform值（注意：该查询在部分新 Android 浏览器中已失效，需搭配(min-resolution: 3dppx)）
不推荐的做法：在 Less 里写 ~"calc(1px / @{dpr})" —— calc() 是运行时计算，无法被 Less 编译为具体数值，最终生成的仍是无效 CSS。
圆角边框和 border-radius 怎么处理
别在伪元素上直接写 border-radius，缩放后弧度会失真。正确做法是让父容器承担圆角和裁剪职责：
- 父元素设
border-radius和overflow: hidden - 伪元素尺寸略大（比如
width: 200%、height: 200%），再整体transform: scale(0.5) - 确保父元素
box-sizing: border-box，否则 padding 会和伪元素重叠
容易被忽略的一点：如果父元素本身有 border 或 background-clip: padding-box，伪元素可能被裁掉一部分——这时要检查层叠上下文和 z-index 顺序，而不是调大伪元素尺寸。
