如何解决移动端1px边框太粗的问题_利用CSS transform-scale缩放-css教程-PHP中文网

::after伪元素配合transform: scaleY(0.5)是最稳解法，因1px在dpr≥2设备上被拉伸为多物理像素，而0.5px不被旧安卓WebView支持，viewport缩放又破坏布局；关键要设position: relative、transform-origin: 0 100%、height: 1px及显式background-color。

如何解决移动端1px边框太粗的问题_利用css transform-scale缩放

直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前最稳、最可控的解法，比硬写 0.5px 或改 viewport 更可靠。

为什么 `border: 1px` 在手机上看起来像 2px？

在 dpr=2 的设备（如 iPhone 8）上，1 个 CSS 像素对应 2 个物理像素，浏览器不会“降采样”边框，而是把 1px 拉伸成 2 物理像素宽。DPR=3 设备更明显。这不是 bug，是像素映射的自然结果。

常见错误现象：

写了 border-bottom: 1px solid #eee，真机上看像一条粗灰线
直接写 border: 0.5px，部分安卓 WebView（尤其 Android 4.x 和旧版 UC）不识别，渲染为无边框
改 viewport 缩放后，字体、间距全乱，需重调所有尺寸

`::after + scaleY(0.5)` 怎么写才不偏位？

关键不在缩放本身，而在定位基点和父容器约束。缩放默认以中心为轴心，会导致伪元素下移或上浮。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

父元素必须设 position: relative，否则 ::after 的 position: absolute 失效
transform-origin 必须显式设为 0 100%（左下角），才能让 scaleY(0.5) 从底部向上压缩，不破坏对齐
伪元素推荐写 height: 1px + scaleY(0.5)，语义清晰；避免用 border 属性画边框——它受盒模型影响，缩放后内容区可能被挤

示例（底部单边）：

.line-bottom {
  position: relative;
}
.line-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  transform: scaleY(0.5);
  transform-origin: 0 100%;
}