iPhone上border:1px显示为2px是因DPR=2导致1逻辑像素映射为2物理像素并插值渲染；0.5px无效因浏览器不支持或四舍五入；伪元素方案需同时满足position:relative、transform-origin:0 100%、pointer-events:none才可靠。
为什么直接写 border: 1px 在 iPhone 上看起来像 2px？
这不是写错了，是设备像素比（dpr）导致的必然结果。iPhone 8 及之后多数机型 dpr = 2，dpr = 3 的机型（如 iPhone 13 Pro）更常见。浏览器把 1 CSS 像素边框渲染成 2 或 3 个物理像素宽，再叠加抗锯齿，视觉上就发虚、偏粗。硬写 border-width: 0.5px 在多数安卓 WebView 和 Safari 旧版本中会被忽略或向上取整为 1px，实测 getComputedStyle(el).borderWidth 仍返回 "1px"。
::after + transform: scaleY(0.5) 怎么写才不偏位？
缩放值只是表象，错位才是真坑。关键在三点定位约束：
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body -
transform-origin必须显式写成0 100%（左下角），才能让scaleY(0.5)从底部向上压缩；写成bottom或left bottom在部分 Safari 版本里会失效 - 伪元素推荐用
height: 1px+background-color，别用border-bottom: 1px——后者缩放后边缘易发虚，且可能挤占内容区 - 务必加
pointer-events: none，防止伪元素遮挡点击区域 - 加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定
适配不同 dpr 设备的缩放比例怎么选？
不能只靠媒体查询硬编码，得看实际场景：
- 对
dpr = 2设备（绝大多数 iPhone、部分安卓），scaleY(0.5)是最稳选择 - 对
dpr = 3设备（如华为 Mate 系列、三星 S22），用scaleY(0.33)比0.333更可靠——CSS 不支持无限精度小数，0.333在某些 Android WebView 中会四舍五入成0.33或0.34 - 不要试图用 JS 动态注入
--scale变量再配合calc()，因为transform不支持calc()里的 CSS 变量（Chrome 122+ 才开始有限支持，iOS Safari 仍不支持） - 更现实的做法：用媒体查询分两档，
@media (-webkit-min-device-pixel-ratio: 3)单独覆盖scaleY(0.33)，其余走0.5
四边都加 1px 边框时，box-sizing 为什么不能省？
单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理：
立即学习“前端免费学习笔记（深入）”；
- 伪元素设
top: 0; left: 0; right: 0; bottom: 0;，再用transform: scale(0.5)整体缩放 - 必须紧跟
box-sizing: border-box，否则默认box-sizing: content-box会让边框外扩 1px，缩放后四角错位、右侧/底部溢出，甚至出现半像素黑线 -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不因内容变化偏移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始尺寸计算，坐标系未同步收缩
dpr 还是用户主动缩放（比如 Chrome 按 Ctrl+滚轮）；后者会让 transform 被二次缩放，导致方案失效。这时候得靠 border-image + linear-gradient 这类不依赖缩放的方案兜底。 
