解决移动端1px变粗的问题

1px变粗的主要原因是：通俗的讲就是高清屏，分辨率提高了，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多，这时，一个css像素就不再等于一个物理像素，所以我们就看到粗了。  具体原因可以参看这篇文章：https://www.cnblogs.com/2050/p/3877280.html

我这里就提供几种方法（如果有其他方法，欢迎补充）：

1.通过js控制，在Retina屏下，显示0.5px

if(window.devicePixelRatio >=2 || devicePixelRatio >= 2){
    $(".contact-dialog .button-tool .tel").css("border-width","0.5px")
    $(".contact-dialog .button-tool .cancel").css("border-width","0.5px")
}

2.通过css的transform + 伪元素

.scale-1px::after{
    content:'';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    background: #e4e4e4;
}