直接写border:1px在iPhone上显粗是因DPR=2导致1逻辑像素映射为2物理像素且无降采样；::after+scaleY(0.5)需父元素relative、transform-origin:0 100%、height:1px+background、pointer-events:none及-webkit前缀。
为什么直接写 border: 1px 在 iPhone 上看起来像 2px
这不是 bug，是设备像素比（dpr）的物理渲染结果：iOS 设备（如 iPhone 8 及以后）dpr=2，CSS 的 1px 被映射为 2 个物理像素，浏览器不做降采样，抗锯齿又让边缘发虚，视觉上就“变粗”。安卓高 DPR 机型（如部分华为、小米）同理。设计师给的 1px 是逻辑像素，而屏幕画了 2px 或 3px。
::after + transform: scaleY(0.5) 实现单边 1px 的硬性条件
这个方案轻量且兼容性好，但漏掉任一条件就会错位、模糊或拦截点击：
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body -
::after用height: 1px+background-color，别用border-bottom: 1px——后者缩放后易糊，且受盒模型干扰 -
transform-origin必须显式写成0 100%（或left bottom），不能只写bottom；Safari 12–15 对无前缀或简写值支持不稳定 - 必须加
pointer-events: none，否则某些安卓 WebView（如 UC、QQ 浏览器）下 touch 事件会被伪元素吞掉 - 要补
-webkit-transform和-webkit-transform-origin前缀，真机调试才能跑通
四边边框用 scale(0.5) 时盒模型和锚点怎么不偏移
单边缩放简单，四边一起缩放极易露白、错位或溢出：
-
::after尺寸设为width: 200%; height: 200%，再transform: scale(0.5)，确保缩放后精准覆盖父容器 - 必须显式声明
box-sizing: border-box到伪元素上，否则默认content-box会让边框外扩，缩放后四角飘移 -
transform-origin改为0 0（左上角），避免内容变化导致缩放中心偏移 - 若父容器有
overflow: hidden，缩放后的伪元素可能被裁——因为它是基于原始 200% 尺寸计算的，坐标系未同步收缩
dpr=3 设备（如 iPhone 12/13/14）下 scale(0.5) 不够用怎么办
硬写 scale(0.5) 只适配 dpr=2；在 dpr=3 下会变成 1.5px，仍偏粗：
- JS 动态读取
window.devicePixelRatio，算出缩放比1 / dpr（如dpr=3 → scale(0.333)） - 用 JS 注入 class 或内联 style 控制缩放值，纯 CSS 媒体查询兜底不可靠——
@media (-webkit-min-device-pixel-ratio: 3)在 Safari 对scale(0.333)子像素渲染极不稳定 -
dpr=3场景更推荐 fallback 方案：box-shadow模拟细线，或用linear-gradient背景图，圆角边框必须走这条路，否则缩放会扭曲弧度
真正落地时，transform 缩放只是起点，pointer-events: none 和 transform-origin: 0 100% 这类细节不连真机反复测，上线后点击失效或边框浮半像素的问题根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
