1px solution

Why is 1px written in the css of the mobile terminal, which actually looks thicker than 1px In fact, the reason is easy to understand: the meaning of these two 'PX' is different There is always a sentence in the html header of the mobile terminal

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

This sentence defines that the width of the viewport on this page is the device width, the initial scaling value and the maximum scaling value are both 1, and user scaling is prohibited Generally speaking, a viewport is an area on the browser that can be used to display pages. This area may be larger than the screen
According to this article http://www.cnblogs.com/2050/p/3877280.html According to the analysis, the mobile phone has an ideal viewport that can be perfectly adapted. The width of the ideal viewport of mobile phones with very different resolutions may be the same. The purpose of this is to ensure that the display effect of the same css under different screens is consistent. The above meta actually sets the width of the ideal viewport
Take a practical example: the screen widths of iPhone 3 and iPhone 4 are 320px and 640px respectively, but the width of their ideal viewport is 320px. After setting the device width, the 320px wide elements can fill 100% of the screen width The width of ideal viewport is different for different mobile phones. The common ones are 320px, 360px and 384px The value of iPhone series was 320px before 6. The advantage of controlling viewport is that a set of css can adapt to multiple models
Those who understand it should already understand the reason why 1px becomes thicker. The settings of viewport and screen physical resolution are proportional rather than the same The window object on the mobile terminal has a devicePixelRatio attribute, which indicates the ratio of physical pixels of the device to css pixels. On the iphone with retina screen, this value is 2 or 3. The 1px length written in css is as long as 2px or 3px when mapped to physical pixels:

Solution

1.0 Decimal value representation px media query corresponding devicePixelRatio There are query values-webkit-min-device-pixel-ratio, css It can be written like this

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

Disadvantages: Android and lower versions of ios are not supported

2.0 :before, :after And transform

.radius-border{
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .radius-border:before{
        content: "";
        pointer-events: none; /* Prevent click trigger */
        box-sizing: border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border-radius: 8px;
        border:1px solid #999;
        -webkit-transform(scale(0.5));
        -webkit-transform-origin: 0 0;
        transform(scale(0.5));
        transform-origin: 0 0;
    }
}

3.0viewport + rem realization

At the same time, by setting the rem reference value of the corresponding viewport, you can write 1px as easily and happily as before.
When devicePixelRatio = 2, output viewport:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

When devicePixelRatio = 3, output viewport:

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

reference resources Using Flexible to realize terminal adaptation of hand Amoy H5 page