One-pixel problem with mobile phone

Due to the problem of mobile phone DPR (device pixel ratio), there are often 1 pixel border problems in WebApp, the solution is as follows

The following code implements BORDER-1PX ($color) {position:relative using sylus    ;    &:after{        Display:block;        Position:absolute;        left:0;        bottom:0;        border-top:1px solid $color;        Content: ";        width:100%;}    } Solution @media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5)  . border-1px    &:: After      -webkit-transform:scaley (0.7)      Transform:scaley (0.7) @media (-webkit-min-device-pixel-ratio:2), ( Min-device-pixel-ratio:2)  . border-1px    &::after      -webkit-transform:scaley (0.5)      transform : ScaleY (0.5)

The above code can be set in a public style, using the example

<class= "tab border-1px"></div>

One-pixel problem with mobile phone