Several ways to solve the 1px border problem on mobile devices (5 methods)

This article introduces 5 ways to solve the 1px border problem on mobile devices. Of course, before that, we first sorted out the knowledge related to these methods: physical pixels, device-independent pixels, device pixel ratio, and viewport.

Physical pixels, device-independent pixels, and device pixel ratio

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

Physical pixel

Physical pixels are also called device pixels or device physical pixels. They are the smallest physical display units of displays (computers and mobile phone screens). Each physical pixel consists of a color value and a brightness value. The so-called 1x screen, 2x screen (Retina), and 3x screen refer to how many physical pixels the device uses to display one CSS pixel. That is to say, the multi-screen uses more and finer physical pixels to display one CSS pixel. On a normal screen, 1 CSS pixel corresponds to 1 physical pixel, while on a Retina screen, 1 CSS pixel corresponds to 4 physical pixels (refer to the field diagram below for understanding).

Device-independent pixel

Device independent pixels, also known as CSS pixels, are the pixels we use when writing CSS. It is an abstract unit mainly used in browsers to accurately measure the content on web pages.

Device pixel ratio

The device pixel ratio is abbreviated as DPR, which defines the correspondence between physical pixels and device-independent pixels: device pixel ratio = physical pixels / device-independent pixels.

1px in CSS is equal to several physical pixels. In addition to being related to the screen pixel density dpr, it is also related to user zoom. For example, when the user zooms in on a page by half, the physical pixel represented by 1px in CSS will also double; conversely, when the user zooms out on a page by half, the physical pixel represented by 1px in CSS will also halve. This will be discussed in the 1px thin line problem section later in the article.

1px thin line problem

As we know above, the CSS pixel is a 1px wide straight line, and the corresponding physical pixel is different, which may be 2px or 3px. The 1px wide straight line that the designer wants is actually 1 physical pixel wide.

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

Using border-image

Select the image as required, 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;
}

Advantages: You can set single or multiple table frames. Disadvantages: It is difficult to change the color and style, and it may be blurry on some devices.

Using background-image

The method of background-image is the same as that of border-image. You must first prepare an image 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 and good compatibility. Disadvantages: The border is shaded and the color is lighter.

The above three methods are not very effective.

Pseudo-element + transform

Construct a pseudo element with a border of 1px, and then scale it to 50% using transform.

/* The design draft is 750, using a ratio of 1:100, and the font-size is 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);
    }
}

Advantages: It can meet all scenarios and is flexible to modify. Disadvantage: Elements that use pseudo-classes must be nested multiple times.

Calculate rem base value and viewport zoom value with JS

/* The design draft is 750, using a ratio of 1:100, and the 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 and scale it to achieve high-definition 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 for CSS hacking to solve the problem of blurry images and 1px thin lines docEl.setAttribute('data-dpr', dpr);
// Dynamically write style docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

Use JS to accurately set the rem baseline value and initial-scale scaling value for different screens according to the screen size and DPR. This JS solution has perfectly solved the 1px thin line problem.

This concludes this article on several methods (5 methods) to solve the 1px border problem on mobile terminals. For more relevant 1px border content on mobile terminals, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!