border: 1px 在高dpr设备上显粗是因css像素映射物理像素导致；需用::after+transform scaley(0.5)等方案适配，关键要设position: relative、transform-origin: 0 100%、pointer-events: none，并按dpr动态调整缩放比。
直接用 border: 1px 在 iPhone、iPad 或高分安卓机上必然显粗，这不是写错了，是设备像素比（dpr）导致的物理渲染结果；想视觉上“真·1px”，必须绕过浏览器对 border 的默认映射逻辑。
为什么 border: 1px 在真机上看起来像 2px
CSS 的 px 是逻辑单位，不是物理像素。当 window.devicePixelRatio === 2（如 iPhone 8、多数安卓旗舰），1 个 CSS 像素会被浏览器映射到 2 个物理像素上。border: 1px 就自然铺满这 2 个像素——浏览器不会降采样，只是照搬映射关系。dpr = 3 设备更甚，视觉上就是一条糊糊的粗线。
::after + transform: scaleY(0.5) 怎么写才不偏位
缩放本身不难，错位才是真坑。关键不在 scaleY(0.5)，而在定位基点和父容器约束：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
transform-origin必须显式写成0 100%（左下角），才能让缩放从底部向上压；写成bottom在部分 Safari 版本里会失效 - 伪元素推荐用
height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后内容区容易被挤 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击事件 - iOS 12–15 需加
-webkit-transform-origin: left bottom前缀，否则 Safari 渲染错位
不同 dpr 设备下硬写 scale(0.5) 为什么还是粗
因为 dpr = 3 时，scale(0.5) 实际只缩到 1.5 物理像素（2 × 0.5 × 3 = 3 → 占 1.5px），仍不是整数像素：
- 纯 CSS 方案可用媒体查询：
@media (-webkit-min-device-pixel-ratio: 3) { .border-all::after { transform: scale(0.333); } } - JS 动态适配更精准：取
window.devicePixelRatio，计算缩放比为1 / dpr，再注入类或内联样式 - 慎用
0.5px：iOS 8+ Safari 有效，但 Android 大部分 WebView 中被当作0px渲染，边框直接消失 - 四边边框要设
width: 200%; height: 200%+transform: scale(0.5)+box-sizing: border-box，否则缩放后位置飘移或裁边
圆角容器或复杂嵌套时怎么处理
伪元素缩放会扭曲 border-radius 弧度，此时不能直接在伪元素上写圆角：
- 把
border-radius和overflow: hidden放在父元素上，靠裁剪实现视觉圆角 - 改用
background: linear-gradient(to bottom, #ccc 50%, transparent 50%)模拟底边，注意写死background-size: 100% 1px，且过渡点卡在50% - 渐变方案不依赖缩放，但无法自动贴合
border-radius，拐角处会露白或断开 - 若需全兼容圆角，建议服务端下发 CSS 变量或 JS 动态生成对应
dpr的伪元素圆角值（如dpr=2时伪元素设border-radius: 4px）
真正稳定的 1px 方案往往不是单一 CSS 技巧，而是结合 dpr 检测、媒体查询、甚至服务端下发 CSS 变量；最容易被忽略的是 pointer-events: none 和 transform-origin 的显式声明——不试真机根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
