移动端1px相对比设计稿变粗的问题

问题描述
设计最近找我说，文字的边框很粗，和设计稿不匹配，当时由于项目紧，没有特别注意这个细节，现在让我在这个版本迭代修改了。
原因
首先我么要先找到原因，因为css中的1px不等于移动设备的1px，由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。
devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例。
也就是 devicePixelRatio = 物理像素 / 独立像素。
解决办法
我采用的解决办法是利用伪类元素+定位的方式代替直接写1px。
代码如下：

原来的：
border: 1px solid #999;

现在：宽度和高度扩大为原来的两倍，再利用 transform: scale(0.5);缩放为正常。而border: 1px solid #999999;中的1px就是我们眼中看到的0.5px。
:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #999999;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
      border-radius: 0.25rem;
    }