iphone 上 border: 1px 变粗是因 dpr=2 下 css 像素映射为 2 物理像素并插值模糊所致；::after + scaley(0.5) 方案需严格满足 position: relative、bottom: 0 与 transform-origin: left bottom 配对、height: 1px + background-color、pointer-events: none 等条件，否则边框偏移、断开或交互失效。
为什么直接写 border: 1px 在 iPhone 上会变粗
不是你代码写错了，是设备在“认真执行”——dpr=2（如 iPhone 8/SE2）下，1 个 CSS 像素对应 2 个物理像素，浏览器把 border: 1px 渲染成 2 物理像素高，再插值模糊，结果就是发虚、加粗。这不是 bug，是像素映射的自然结果。
::after + transform: scaleY(0.5) 怎么写才不翻车
这个组合最轻量、零 JS、兼容 iOS 8+/Android 4.4+，但漏掉任意一条，边框就偏移、断开或点不动：
-
position: relative必须加在父元素上，否则伪元素无法精确定位到底部 -
bottom: 0和transform-origin: left bottom必须配对，否则缩放后整体上浮 0.5px - 边框必须用
height: 1px+background-color，不能用border-bottom: 1px solid——后者缩放后仍会插值模糊 -
pointer-events: none必须加，否则伪元素盖住内容，点击/滑动全部失效
四边都画时，scaleY 不够用，得改用 scale(0.5)
只压 Y 轴会让左右边变粗；四边要等比缩放，但直接 width: 100%; height: 100% 缩放会裁掉边角：
- 伪元素宽高设为
width: 200%; height: 200%，确保缩放后能覆盖四边 - 必须加
box-sizing: border-box，否则border: 1px会让实际尺寸超出父容器 2px -
transform-origin: left top最稳，尤其父容器有padding或border-radius时 - 如果父容器有
overflow: hidden，缩放后的伪元素可能被裁——transform不改变占位，绝对定位仍按原始尺寸计算
dpr=3 设备要不要写 scaleY(0.333)
理论上该用，但实践中统一用 scaleY(0.5) 更可靠：
-
0.333是浮点数，CSS 渲染存在精度误差，有时反而不如0.5对齐精准 - 绝大多数 dpr=3 设备（如 Pixel 系列、部分华为）对
0.5缩放响应良好，视觉差异极小 - 真要动态适配，建议用 JS 读取
window.devicePixelRatio后注入 CSS 变量，而不是靠媒体查询硬编码
真正容易被忽略的是 pointer-events: none 和 transform-origin 的方向匹配——这两条一错，边框就“活不见人死不见尸”，调试时得盯着 DevTools 里伪元素的渲染位置看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
