iPhone上border:1px变粗是因devicePixelRatio导致物理像素渲染过宽；用::after+scaleY(0.5)可实现视觉1px，需注意transform-origin、pointer-events、box-sizing等细节及DPR=3时的媒体查询或box-shadow兜底方案。
为什么直接写 border: 1px 在 iPhone 上变粗
这不是你写错了，是 window.devicePixelRatio 在起作用：iPhone 6/7/8 是 2，iPhone 14 Pro 是 3，意味着 1 个 CSS 像素被渲染成 2 或 3 个物理像素。浏览器不做降采样，border: 1px 就真画了 2~3px 宽——视觉上必然发虚、偏粗。
Less 中用 ::after + scaleY(0.5) 实现视觉 1px
这是目前兼容性最好、无需 JS、纯样式驱动的方案。关键不是“缩放边框”，而是“画一条 1px 高的色块，再压成视觉 1 物理像素”：
-
position: relative必须加在父元素上，否则::after会脱离容器定位到body - 伪元素用
height: 1px; background-color: #ccc，别用border-bottom: 1px—— 后者受盒模型干扰，缩放后边缘易虚、位置飘 -
transform-origin: 0 100%必须显式写死（不能只写bottom），Safari 和部分安卓 WebView 对默认值解析不一致，不写就上浮露白 - 必须加
pointer-events: none，否则 UC/QQ 浏览器下伪元素会拦截点击，列表项点不中 - iOS 12–15 建议补全前缀：
-webkit-transform: scaleY(0.5)和-webkit-transform-origin: 0 100%
Less mixin 封装四边边框时的避坑点
单边缩放简单，四边一起缩放极易错位或被裁切。VUX 和主流工程实践都用 scale(0.5) + 200% 尺寸 方案，但以下三点常被忽略：
- 伪元素设
top: 0; left: 0; width: 200%; height: 200%，再transform: scale(0.5)，锚点必须改transform-origin: 0 0（左上角），否则缩放后四角偏移 - 伪元素必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角错位 - 父容器若有
overflow: hidden，缩放前的 200% 尺寸可能被裁——加will-change: transform或transform: translateZ(0)强制图层提升
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%)，它对 DPR 友好且颜色可配
真正容易被忽略的是：缩放后的伪元素如果没加 pointer-events: none，某些安卓 WebView 下 touch 事件会丢失；transform-origin 写成 left bottom 而非 0 100%，在真机上就可能抬高半像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
