最稳妥方案是伪元素+transform缩放：通过::after/::before创建边框并用scaleY(0.5)等缩放至1物理像素，配合transform-origin和pointer-events: none实现兼容性与交互友好。
移动端 1px 边框在 Retina 屏（如 iPhone）上变粗，本质是 CSS 像素与物理像素不匹配：DPR=2 时，1px CSS 宽度实际占用 2 物理像素，视觉上就变“粗”了。最稳妥、兼容性好、项目中广泛落地的方案，是伪元素 + transform 缩放。
用伪元素模拟 1 物理像素边框
核心不是改 border-width，而是用 ::after 或 ::before 创建一个“假边框”，再通过缩放让它在物理层面只占 1 像素：
- 给目标元素加
position: relative，为伪元素提供定位上下文 - 伪元素设
height: 1px（或width: 1px），background-color或border设颜色 - 关键一步：
transform: scaleY(0.5)（底边/顶边）或scaleX(0.5)（左边/右边） - 必须加
transform-origin: 0 100%（底边）或0 0（顶边），避免缩放后位置偏移 - 加上
pointer-events: none，防止遮挡点击区域
适配不同 DPR 的屏幕
单一 scaleY(0.5) 能覆盖大部分 DPR=2 设备，但对 DPR=3（如 iPhone 12+）需更精细处理：
- 用媒体查询区分：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) - 对应把缩放值改为
scaleY(0.333)，或更稳妥地用 CSS 变量 + JS 动态注入 - JS 获取
window.devicePixelRatio，设置根元素style="--scale: 0.5"，CSS 中写transform: scaleY(var(--scale))
其他可行但有局限的方案
不是不能用，但要注意适用边界：
- 直接写 0.5px：iOS 8+ 和部分安卓新版支持，但低版本会忽略或渲染异常，需 JS 检测兜底
-
viewport 缩放：设
initial-scale=0.5可让 1px = 1 物理像素，但整个页面被缩小，字体、间距全乱，基本不推荐 - border-image / 渐变背景：适合固定色、静态边框，换色或圆角需额外处理，维护成本高
- SVG 线条：清晰度无敌，但每个边框都要内联或引用 SVG，代码冗余，不适合高频复用场景
伪元素方案不侵入原有布局，不影响盒模型，也无需引入外部资源，是目前工程实践中的首选解法。只要注意定位、缩放原点和交互穿透，就能稳定生效。
