移动端1px边框在Retina屏变粗是CSS像素与物理像素映射所致，稳定方案是伪元素+transform:scale()；0.5px因DPR兼容性差、圆角模糊、无法动态适配而不可靠。
移动端1px边框在Retina屏上实际渲染为2物理像素，视觉上明显变粗——这不是bug，是CSS像素与设备物理像素映射的必然结果。真正能稳定落地的方案，是用伪元素 + transform: scale() 主动控制渲染精度，而不是依赖浏览器对0.5px的支持。
为什么不能直接写 border: 0.5px
虽然部分 iOS 8+ 和 Android Chrome 支持0.5px，但行为不一致：
• 0.5px 在 DPR=2 设备上可能渲染为1物理像素，但在 DPR=3 上常被向上取整为1px（即2物理像素）
• Android 低版本 WebView 完全忽略0.5px，直接按1px处理
• border-radius 与0.5px组合时，圆角边缘常出现模糊或锯齿
• 无法动态适配不同DPR：DPR=2要0.5，DPR=3理论上该用0.33，但CSS不支持变量计算
::after + scaleY(0.5) 单边实现要点
这是最轻量、复用性最高的下边框方案：
- 父元素必须设
position: relative，否则::after的bottom: 0会相对于视口定位 -
height写1px或2px都行，关键在transform: scaleY(0.5)——它把整个伪元素沿Y轴压缩一半 -
transform-origin: left bottom比0 0更稳妥：确保缩放锚点在左下角，避免边框上移 - 安卓 4.4 以下 WebView 对
scaleY支持差，可降级为transform: scale(0.5)（同时缩X/Y），只要伪元素宽度是100%，X轴缩放无感知
.line-bottom {
position: relative;
}
.line-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: left bottom;
}四边 border 用 scale(0.5) 要防盒模型错位
直接给元素加 border: 2px 再缩放，会导致内容区被挤窄——因为border 默认计入宽高。正确做法是让伪元素“代扛”边框：
立即学习“前端免费学习笔记（深入）”；
- 伪元素设
width: 200%、height: 200%，再transform: scale(0.5)，这样缩放后刚好覆盖原区域 - 必须加
box-sizing: border-box，否则border: 1px会让伪元素多出2px宽高，缩放后仍溢出 -
transform-origin设为left top，保证缩放从左上角开始，不偏移 - 如果需要
border-radius，伪元素也要同步设置，且值需按DPR倍数放大（例如 DPR=2 时写border-radius: 8px）
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid #e5e5e5;
box-sizing: border-box;
transform: scale(0.5);
transform-origin: left top;
border-radius: 4px; /* 注意：这里对应的是设计稿的2px圆角 */
}容易被忽略的兼容细节
真实项目里，这几个点经常导致上线后边框“突然变粗”：
- 伪元素用了
content: ''但没写display: block，在某些旧版 Safari 中高度失效 - 父元素有
overflow: hidden，而伪元素缩放后坐标微偏，被裁掉一像素 - 使用了 CSS-in-JS（如 Emotion），
transform属性名未自动加-webkit-前缀，iOS 9 以下白屏 - 页面存在
zoom或强制缩放的 meta 标签，会干扰transform的像素计算基准
最稳的做法：用 JS 检测 window.devicePixelRatio，只在 DPR ≥ 2 时才挂载这些类——不是所有设备都需要这套逻辑。
