移动端1px线非真1px是因高dpi屏下css像素与物理像素非1:1映射；常用transform:scaley(0.5)缩放2px边框实现视觉1px，需设transform-origin且父容器禁用overflow:hidden；border-image+svg可实现真正1物理像素，兼容ios8+/android4.4+；js方案依devicepixelratio动态设0.5px，但低版本安卓webview不支持。
移动端 1px 线为什么不是真 1px
因为高 DPI 屏幕（比如 iPhone Retina、安卓 2x/3x 屏）下，CSS 像素和物理像素不是 1:1。你写 border: 1px solid #ccc，实际渲染可能是 2px 或 3px 宽——浏览器把 1 CSS 像素映射到多个物理像素，导致线条变粗、模糊。
用 transform: scaleY(0.5) 拉伸容器实现视觉 1px
这是最常用、兼容性好、无需 JS 的方案：先让元素有 2px 边框，再用缩放压回视觉高度。
- 只对
border-bottom或border-top生效，border-left/right要用scaleX(0.5) - 必须设置
transform-origin: top（对 bottom 边框）或bottom（对 top），否则缩放中心错位 - 父容器不能有
overflow: hidden，否则缩放后被裁掉 - 示例：
.line {<br> height: 2px;<br> background: #ddd;<br> transform: scaleY(0.5);<br> transform-origin: top;<br>}
用 border-image + SVG 实现真正 1px 渲染
绕过设备像素比干扰，直接指定 1 物理像素宽的 SVG 图像作为边框图案，适合对精度要求高的场景。
- SVG 内容必须是 1px 高（或宽），且
viewBox="0 0 1 1" - CSS 中要写完整
border-image四个参数：border-image: url("data:image/svg+xml,...") 1 stretch - 注意 URL 中的
#和/要编码，否则解析失败；推荐用在线工具生成 base64 - 兼容性略低于 transform 方案，iOS 8+、Android 4.4+ 支持良好
伪元素 + devicePixelRatio 动态适配（JS 方案）
在 JS 中读取 window.devicePixelRatio，动态设置伪元素的 height 或 border-width，比如 dpr=2 时设为 0.5px。
- 现代浏览器支持
0.5px（Chrome 52+、Safari 9+、Firefox 47+），但安卓低版本 WebView 不认 - 务必配合
meta viewport设置initial-scale=1，否则 dpr 可能不准 - 伪元素需设
content: ""、position: absolute，且父元素要position: relative - 不建议全局监听
resize，dpr 在页面生命周期内基本不变
transform: scaleY(0.5) 是首选——它稳定、零依赖、调试直观。但要注意：如果元素本身用了 will-change 或复杂动画，缩放可能触发重绘异常；这时候该换 border-image 或干脆接受“近似 1px”设计妥协。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
