如何解決手機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...