如何解决手机retina显示屏下的1px太粗问题

Retina

要解决这个问题，我们就要先了解Retina到底是什么？

所谓“Retina”是一种显示技术，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
在超高清屏(dpr=3)的情况下会用3dp的大小去渲染1px的内容, 因此1px的边框在超高清手机上会被拉伸成3px。所以才会导致我们在某些手机上看到的1px不是真实的1px。
接下来我们可以用下面这个方法来解决这个问题。

• 对于水平方向的border,可以这样设置

  .weui-grids:before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 1px;
       border-top: 1px solid red;
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
       -webkit-transform-origin: 0 0; 
       transform-origin: 0 0;   
  
     }
     .weui-grids:after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 1px;
       border-bottom: 1px solid red;
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
       transform-origin: 100% 100%;  
     }

• 对于竖直方向的border,可以这样设置

   .weui-grid:before {
         content: "";
         position: absolute;
         right: 0;
         top: 0;
         bottom: 0;
         width: 1px;
         border-right: 1px solid #D9D9D9;
         -webkit-transform: scaleX(.5);
         transform: scaleX(.5);
         -webkit-transform-origin: 100% 0;
         transform-origin: 100% 0;
       }
  
   .weui-grid:after {
         content: "";
         position: absolute;
         right: 0;
         left: 0;
         bottom: 0;
         height: 1px;
         border-bottom: 1px solid #D9D9D9;
         -webkit-transform: scaleY(.5);
         transform: scaleY(.5);
         -webkit-transform-origin: 0 100%;
         transform-origin: 0 100%;
       }
  

当然这是解决办法之一啦，更多解决方法可参考https://www.cnblogs.com/surfa...