真正实现「一物理像素」需设viewport initial-scale=1且禁用缩放，再用transform: scaley(0.5)配合transform-origin控制渲染精度；其他方案如js适配、border-image、box-shadow均存在兼容性或精度问题。
移动端 CSS 中的 1px 在高清屏（如 iPhone Retina、Android 高 DPI 设备）上实际渲染为 2 或 3 物理像素，导致线条变粗、模糊。真正实现「一物理像素」的边框或分割线，核心不是靠缩放，而是绕过浏览器默认的 DPR 缩放机制，直接控制渲染精度。
viewport 的 initial-scale 必须设为 1，且禁用缩放
这是所有方案的前提。如果 initial-scale 不是 1，或者用户可缩放，device-width 和 device-height 就不可靠，后续基于 DPR 的计算会失准。
正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
常见错误：
-
initial-scale=1.0看似一样，但某些 Android WebView 会忽略小数点后零，解析异常 - 漏掉
maximum-scale=1和user-scalable=no，用户双指缩放后 DPR 动态变化，1px线条忽粗忽细 - 设了
width=device-width却没配initial-scale=1，部分 iOS Safari 会 fallback 到 980px 宽度，DPR 计算彻底失效
CSS transform: scaleY(0.5) 是最轻量、兼容性最好的方案
本质是让元素在视觉上压缩一半高度（或宽度），再用 origin 对齐边缘，从而让 1 CSS 像素占据 1 物理像素。它不依赖 JS，无 polyfill 成本，iOS 8+ / Android 4.4+ 均稳定支持。
典型用法（下边框）：
.hairline {<br> position: relative;<br>}<br>.hairline::after {<br> content: '';<br> position: absolute;<br> left: 0;<br> bottom: 0;<br> width: 100%;<br> height: 1px;<br> background-color: #e5e5e5;<br> transform: scaleY(0.5);<br> transform-origin: 0 0;<br>}
关键细节：
- 必须加
transform-origin: 0 0（或bottom），否则缩放中心在元素中点，边框会偏移 - 不能用
scale(0.5)全向缩放，会导致文字也变小；只缩scaleY或scaleX更安全 - 若容器有
overflow: hidden，需确保伪元素未被裁剪（加z-index或调整层级）
JS 动态写入 border + devicePixelRatio 适配仅适合强一致性场景
当项目要求所有边框严格等宽（比如设计系统组件库），且能接受 JS 初始化延迟时，可用此法。原理是读取 window.devicePixelRatio，动态设置 border-width 为 1 / DPR px，再配合 transform: scale(DPR) 把整个元素放大回视觉大小。
示例逻辑：
const dpr = window.devicePixelRatio || 1;<br>document.documentElement.style.fontSize = `${100 / dpr}px`;<br>// 然后 .border-1px 元素设 border: 1px solid #eee，再用 transform: scale(dpr) 缩回
但要注意：
-
devicePixelRatio在页面生命周期中可能变化（如横竖屏切换、系统字体缩放），需监听resize或orientationchange - Android 很多定制 ROM 返回的 DPR 不准确（如返回 2.5 实际是 3），导致边框仍粗于预期
- 与 CSS-in-JS 或 Shadow DOM 组件集成时，样式作用域容易混乱，
transform放大可能影响子元素布局
慎用 border-image 或 box-shadow 模拟单像素线
这两种方式看似“纯 CSS”，但实际问题明显：
-
border-image需要额外切图（1px 高的渐变 PNG），增加 HTTP 请求，缓存和 CDN 分发成本上升；且无法响应式缩放，DPR 变化时图元拉伸失真 -
box-shadow: 0 1px 0 #eee在部分 Android 低版本（如 4.2）上抗锯齿异常，出现半透明毛边；iOS 上阴影扩散半径受系统设置影响，稳定性差 - 两者都无法精确控制渲染起始位置，滚动时易出现“闪烁”或“跳动”，尤其在 position: sticky 或 fixed 元素上
真正需要一物理像素的场景，往往是对 UI 精密度要求极高（如金融类 App 的交易明细分隔线、医疗设备控制面板）。此时更值得花时间统一用 transform: scaleY(0.5) 方案，并封装成 SCSS mixin 或 PostCSS 插件，避免每个地方重复写伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
