直接写border:1px在iphone上显粗是因dpr≥2导致1px映射为多个物理像素；最稳解法是::after伪元素+transform:scaley(0.5)，需父元素position:relative、transform-origin:0 100%、height:1px+background-color及pointer-events:none。
为什么直接写 border: 1px 在 iPhone 上就是粗的
这不是你漏写了 box-sizing 或写错了颜色，而是设备像素比（window.devicePixelRatio）在起作用：DPR=2 时，1 个 CSS 像素被映射到 2 个物理像素；DPR=3 时占满 3 个。浏览器照规范渲染，不降采样、不抗锯齿优化，结果就是边框“发虚+变粗”。border: 0.5px 看似直觉，但安卓 WebView 多数直接忽略，iOS 旧版 Safari 会四舍五入为 1px，0.333px 更是常被解析器丢弃——它根本不会生效。
::after + transform: scaleY(0.5) 的最小可靠写法
这是目前兼容性最好、无需 JS、不干扰布局的纯 CSS 方案，但漏掉任一条件就会偏位或失效：
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body -
::after用height: 1px+background-color，别用border-bottom: 1px——后者缩放后易模糊，且受box-sizing干扰 -
transform-origin必须显式写成0 100%（即left bottom），只写bottom在 iOS 12–15 Safari 中会失效 - 务必加
pointer-events: none，否则某些安卓 WebView 下点击会被伪元素拦截 - iOS 12–15 需同时写
-webkit-transform: scaleY(0.5)和-webkit-transform-origin: left bottom
四边边框和 DPR=3 设备的坑点
单边边框用 scaleY/scaleX 比较安全，但四边一起处理容易露白或错位：
- 伪元素需设
width: 200%、height: 200%、border: 1px solid #000，再transform: scale(0.5) -
transform-origin改为0 0（左上角），配合box-sizing: border-box，否则边框会外扩 -
scale(0.5)只覆盖 DPR=2；DPR=3（如 iPhone 14 Pro）下scale(0.333)渲染不稳定，Safari 常显示为 1.5 物理像素——此时更推荐 fallback 到background: linear-gradient(to bottom, #ccc 50%, transparent 50%)，并配background-size: 100% 1px - 滚动容器中伪元素被裁切？给父容器加
transform: translateZ(0)强制图层提升
圆角容器和 overflow:hidden 下的常见翻车点
伪元素方案在复杂 UI 中失效，往往不是缩放逻辑错了，而是渲染坐标系没对齐：
- 圆角边框：把
border-radius写在父元素上，伪元素只负责画色块，否则缩放后圆角变形 -
overflow: hidden容器里边框消失？因为width: 200%缩放前已被裁掉——加will-change: transform或backface-visibility: hidden触发硬件加速可缓解 - 伪元素遮挡表单控件？除了
pointer-events: none，还要检查 z-index 层级，某些 UC 浏览器下仍需手动调高父元素层级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
