Mobile end pixel problem solving

Mobile end 1px pixel problems and solutions

Introduction: In the moving end web development, UI design draft is set to a border pixel, the distal end during development if there border: 1px, the test will be found on some models, 1px be fairly thick, that is, the more classic moving end 1px pixel problems.

Why is there a problem 1px

Physical pixel:
a mobile device the factory, carrying different pixels different devices, also known as a hardware pixels;
logical pixel:
is css of pixels;

Solution

 @media screen and (-webkit-min-device-pixel-ratio: 2) {
     .border { border: 0.5px solid #ccc }
 }
 @media screen and (-webkit-min-device-pixel-ratio: 3) {
     .border { border: 0.333333px solid #ccc }
 }

Use transform: scaleY

.line{
     width: 100%;
     height: 1px;
     background-color: black;
     margin-top: 100px;
     transform: scaleY(0.33333);
     transform-origin: 0 0;
 }