iPhone、安卓高DPR设备上border:1px变粗是因CSS像素映射多物理像素且无降采样；0.5px兼容性差，推荐::after+transform:scaleY(0.5)方案，需注意position、transform-origin、pointer-events及前缀等细节。
直接写 border: 1px 在 iPhone、安卓高 DPR 设备上必然变粗，这不是你 CSS 写错了，是浏览器把 1 个 CSS 像素映射成了 2 或 3 个物理像素，且不做降采样——想“看起来是 1px”，必须绕过 border 的原生渲染逻辑。
为什么 border-width: 0.5px 基本不可用
看似最直觉的解法，实际在真机上大概率失效：
- iOS Safari 8+ 才开始有限支持
0.5px，旧版本直接忽略； - 安卓大部分 WebView（如 UC、QQ 浏览器）会把
0.5px当作0px渲染，边框直接消失； -
0.333px这类值连 CSS 解析器都可能丢弃，getComputedStyle(el).borderWidth返回的仍是"1px"； - 即使能解析，在
flex/grid容器中也容易触发重排或尺寸抖动。
::after + transform: scaleY(0.5) 实现下边框
这是目前兼容性最好、纯 CSS、无需 JS 的落地方案。关键不是“缩放边框”，而是“画一条 1px 高的色块，再压成视觉 1 物理像素”：
- 父元素必须设
position: relative，否则伪元素会脱标到body； - 伪元素用
height: 1px+background-color: #ccc，别用border-bottom: 1px——后者受盒模型干扰，缩放后边缘易虚； -
transform-origin: 0 100%必须显式写死（不能只写bottom），Safari 对默认值解析不一致，不写就上浮露白； - 必须加
pointer-events: none，否则 UC/QQ 浏览器下伪元素会拦截点击； - iOS 12–15 建议加
-webkit-transform和-webkit-transform-origin前缀，否则无前缀属性可能不生效。
四边边框怎么写才不偏位、不裁边
单边缩放简单，四边一起缩放容易错位或被 overflow: hidden 裁掉：
立即学习“前端免费学习笔记（深入）”；
- 伪元素设
top: 0; left: 0; width: 200%; height: 200%，再transform: scale(0.5)； -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不随内容变化偏移； - 伪元素必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角错位； - 父容器若有
overflow: hidden，缩放前的200%尺寸可能被裁——加will-change: transform或transform: translateZ(0)强制图层提升； - 圆角要写在父元素上，由父容器裁剪伪元素，别在伪元素上直接设
border-radius，否则缩放后变形。
真正容易被忽略的是：transform-origin 写成 left bottom 而非 0 100%，在真机上就可能抬高半像素；pointer-events: none 漏掉，某些安卓 WebView 下 touch 事件会丢失——这些细节不验证到真机，光看 DevTools 是看不出问题的。
