怎样处理移动端 1px 被渲染成 2px 问题？

参考答案：

在移动端开发中，经常遇到的一个问题是，原本设置的1px边框在某些设备或某些浏览器中会被渲染成2px，这主要是因为设备的物理像素（也称为设备像素或DPR）和CSS像素（也称为逻辑像素）之间的不匹配导致的。

以下是一些处理这个问题的常见方法：

使用viewport meta标签：在HTML文档的head部分，添加viewport meta标签，并设置initial-scale和maximum-scale为1，可以确保页面的缩放级别始终为1，从而避免因为缩放导致的像素渲染问题。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

使用transform: scale()：可以通过对元素应用transform: scale(0.5)来缩小元素的尺寸，然后再将边框宽度设置为2px，这样虽然看起来还是1px，但实际上是因为元素缩小了，边框的实际宽度并没有改变。

.element {
  transform: scale(0.5);
  transform-origin: 0 0;
  border-width: 2px;
}

.element {
  border: 1px solid transparent;
  border-image: url(1px.png) 2 2 2 2 stretch stretch;
}

这里url(1px.png)是一个1px宽的图片，2 2 2 2表示边框的上下左右四个方向的切片宽度，stretch stretch表示在水平和垂直方向上拉伸图片。

.element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
  z-index: -1;
}