最稳解法是::after+transform:scaleY(0.5)，需满足四约束：父元素position:relative、::after用height:1px+background-color、transform-origin:0 100%、pointer-events:none。
直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前最稳、覆盖机型最广的解法；硬写 border-width: 0.5px 在旧版安卓 WebView 和 iOS 12 及以下基本无效，viewport 缩放则会连带破坏整个布局。
为什么 border: 1px 在手机上看起来像 2px？
这不是代码错误，是设备像素比（window.devicePixelRatio）导致的物理渲染结果：iPhone 8/SE2 的 dpr=2，CSS 中的 1px 被浏览器直接映射为 2 个物理像素宽，且不做降采样或亚像素对齐——插值后线条就发虚、变粗。dpr=3 的 iPhone 14 Pro 更甚，1px 实际占 3 物理像素。
::after + scaleY(0.5) 必须配齐的四个约束条件
只写 transform: scaleY(0.5) 不够，漏掉任意一条都会偏位、露白、拦截点击：
- 父元素必须设
position: relative，否则::after会相对于body定位，飘出容器 -
::after推荐用height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后边缘易模糊、位置飘移 -
transform-origin必须显式写成0 100%（即left bottom），不能只写bottom；Safari 和部分安卓 WebView 对默认值解析不一致，不写就会上浮露白 - 必须加
pointer-events: none，否则 UC、QQ、微信内置浏览器下伪元素会拦截点击，列表项点不中
四边边框用 scale(0.5) 怎么避免错位和裁切
单边缩放简单，四边一起缩放容易偏移或被裁，关键在尺寸撑开 + 锚点锁定：
立即学习“前端免费学习笔记（深入）”；
-
::after设top: 0; left: 0; right: 0; bottom: 0;，再配width: 200%; height: 200%，画border: 1px solid #000，最后transform: scale(0.5) -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不随内容变化偏移 - 伪元素必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角错位 - 若父容器有
overflow: hidden，缩放后的伪元素可能被裁——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩；可加will-change: transform提升图层防裁切
dpr=3 设备（如 iPhone 14 Pro）下 scaleY(0.5) 仍显粗怎么办
scaleY(0.5) 在 dpr=3 下实际占 1.5 物理像素（1px × 2 × 0.5 × 3 = 3 → 渲染为 1.5px），不是整数像素，Safari 渲染仍会插值发虚：
- 媒体查询兜底最稳妥：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx)内覆盖transform: scaleY(0.333) - 但 Safari 对
scaleY(0.333)支持不稳定，更推荐 fallback 到box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)模拟下边框，或background: linear-gradient(to bottom, #ccc 50%, transparent 50%) - 别试图用 JS 注入 class——首屏渲染前 JS 还没执行，白屏期边框就错了
真正容易被忽略的是：::after 的 content 必须是非空字符串（哪怕只是 ''），且 background-color 必须显式指定——它无法自动继承父级颜色；圆角场景下，别在伪元素上直接设 border-radius，改用父容器 overflow: hidden 裁剪更可靠。
