Several methods to solve the problem of 1px frame of mobile terminal (5 kinds)

Time:2020-6-25

This paper introduces five methods to solve the problem of 1px frame in mobile terminal. Of course, before that, I sorted out the knowledge related to these methods: physical pixels, device independent pixels, device pixel ratio and viewport.

Physical pixel, device independent pixel and device pixel ratio

In CSS, we usually use PX as a unit. It should be noted that PX and physical pixels in CSS style are not equal. The pixels in CSS are only an abstract unit. In different devices or environments, the physical pixels represented by 1px in CSS are different. On the PC side, 1px of CSS generally corresponds to one physical pixel of the computer screen, but on the mobile side, 1px of CSS is equal to several physical pixels.

Physical pixel

Physical pixel is also known as device pixel and device physical pixel. It is the smallest physical display unit of display (computer, mobile screen). Each physical pixel is composed of color value and brightness value. The so-called double screen, double screen and triple screen refer to how many physical pixels the device displays a CSS pixel, that is, multiple screens display a CSS pixel with more and more fine physical pixel points, one CSS pixel corresponds to one physical pixel under the ordinary screen, and one CSS pixel corresponds to four physical pixels under the retina screen (refer to the following fields The word is intended to be understood).

Device independent pixel

Device independent pixel, also known as CSS pixel, is the pixel we use when writing CSS. It is a unit of image extraction, mainly used in browsers, to accurately measure the content of web pages.

Device pixel ratio

The device pixel ratio is called DPR for short, which defines the corresponding relationship between physical pixels and device independent pixels: device pixel ratio = physical pixels / device independent pixels.

The 1px of CSS is equal to several physical pixels, which is not only related to screen pixel density DPR, but also related to user scaling. For example, when users double the page size, the physical pixels represented by 1px in CSS will double; otherwise, the physical pixels represented by 1px in CSS will double. On this point, I will talk about the 1px thin line problem later in the article.

1px thin line problem

As we have known above, CSS pixels are 1px wide straight lines, and the corresponding physical pixels are different, maybe 2px or 3px, while the 1px wide straight lines that designers want are actually 1px wide physical pixels.

For CSS, it can be considered as border: 0.5px;, which is the smallest unit that can be displayed under multiple screens. However, not all mobile browsers can recognize border: 0.5px. In some systems, 0.5px will be treated as 0px. How about 1px thin line?

Implement with border image

Select the picture according to the demand, and then set it according to the border image property of CSS. The code is as follows:


div
{
 -moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
 -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
 -o-border-image:url(border.png) 30 30 stretch; /* Opera */
 border-image:url(border.png) 30 30 stretch;
}

Advantage: single and multiple table boxes can be set. Disadvantages: changing color and style is troublesome, and some devices will be blurred.

Using background image

Background image is the same as border image. You need to prepare a picture that meets your requirements. The advantages and disadvantages are the same as border image.


 .background-image-1px {
 background: url(../img/line.png) repeat-x left bottom;
 -webkit-background-size: 100% 1px; background-size: 100% 1px;
}

Use box shadow to simulate borders


 .box-shadow-1px {
   box-shadow: inset 0px -1px 1px -1px #c8c7cc;
 }

Advantages: less code, good compatibility. Disadvantages: the border is shaded and the color is lighter.

The above three methods are not very effective

Pseudo element + transform

Build a pseudo element with a border of 1px and scale it to 50% in transform.

/*The design draft is 750, with a ratio of 1:100 and font size of 100 * (100vw / 750)*/
.border-1px {
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-1px:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        color: #D9D9D9;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

Advantage: it can satisfy all scenes and can be modified flexibly. Disadvantage: elements that have used pseudo classes should be nested in multiple layers.

Using JS to calculate REM benchmark value and viewport scaling value

/*The design draft is 750, the proportion of 1:100 is adopted, and font size is 100 *( docEl.clientWidth  * dpr / 750) */
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
//Set the viewport to zoom to achieve HD effect
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
//Set the data DPR attribute and save it for CSS hack to solve the problem of image blur and 1px thin line
docEl.setAttribute('data-dpr', dpr);
//Dynamic write style
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

According to the screen size and DPR, JS is used to precisely set the REM reference value and initial scale scaling value of different screens. This JS scheme has perfectly solved the 1px thin line problem

This article introduces several methods (5 kinds) to solve the problem of mobile 1px border. For more information about mobile 1px border, please search the previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]