Mobile end 1px border solutions

In the retina screen, the pixel ratio is 2 (iPhone6 ​​/ 7/8) or 3 (iPhone6Plus / 7Plus / 8Plus), 1px border really looks wider than 1px.

• Plus class using pseudo manner transform

  Element itself does not define the border, the border 1px pseudo-element definition, and in accordance with the ratio set according to the pixel scale, the pixel is set to 0.33 when the ratio is 3, the pixel set to 0.5 ratio of 2:00.

HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
    position: relative;
}

.border-1px:after {
    position: absolute;
    content: "";
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-top: 1px solid #666;
}

@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
    border-1px::after {
        -webkit-transform: scaleY(0.33333333);
        transform: scaleY(0.33333333);
    }
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
    border-1px::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

When set directly border 1px

HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
    border-top: 1px solid #666;
}

The final effect of both is as follows (the former on the latter runs iPhone6Plus / 7Plus / 8Plus simulator, running on iPhone6 ​​/ 7/8 simulator):