The best way to solve the 1px border on mobile devices (recommended)

When developing for mobile devices, you often encounter the problem of element borders becoming thicker on retina screens. This article will explore the causes of the border thickening problem and introduce the best solutions currently on the market.

The origin of the 1px border problem

Apple iPhone 4 first proposed the concept of Retina Display. In the retina screen used by iPhone 4, 2x2 pixels are used as 1 physical pixel, that is, 2x2 pixels are used to display the content originally displayed by 1 physical pixel, making the UI display more refined and clear. These 2x2 pixels are called logical pixels. A retina screen with a pixel ratio of 2 (pixel ratio (DPR) = physical pixels / logical pixels) is also called a double screen. Currently, there are triple and quadruple screens with even higher pixel ratios on the market. In CSS, 1px refers to physical pixels. Therefore, a border set to 1px actually occupies a width of 2 logical pixels on a retina screen with dpr = 2, which results in a visual experience of a thicker interface border.

Solved using transform

The most popular solution on the market is to set the element's box-sizing to border-box, construct pseudo-elements, and then use CSS3's transform to scale. This method can meet all scenarios and is flexible to modify. The only drawback is that an extra useless element must be nested for elements that already use pseudo-elements. The specific implementation is as follows:

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

This will give you a 0.5px border.

You can also combine media queries (@media) to solve the border problem of screens with different DPR values, as follows:

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

Note: The Safari browser on iOS does not support the standard min-resolution and uses a non-standard min-device-pixel-ratio.

Use pixel-border.css to solve

pixel-border.css is a general CSS tool to solve the 1px border problem on mobile devices. The solution using transform has only a few lines of source code and is very convenient to use. It is the best solution found so far.

Install

npm installation:

npm install pixel-border --save

Yarn installation:

yarn add pixel-border

For browser installation, it is recommended to install the compressed version:

<link rel="stylesheet" href="path/to/pixel-border.min.css"><link>

use

Pixel-border sets a border for an element using the transform scaled via the element's ::before pseudo-element. Therefore, you can use native CSS border properties to set borders for elements. Just add a pixel-border or pixel-border="true" attribute to the element and set the element's border-style value. This creates a one-pixel border:

<div pixel-border style="border-style: solid;">Single pixel border</div>

Note: pixel-border has been set to a fixed value of 1px for the element's border, so do not set border-width for the element, and the element's box-sizing value is set to border-box, so do not reset it to other types of values.

Set an arbitrary border:

When setting the border of one side of an element, you only need to set the value of one of border-top-style, border-bottom-style, border-left-style, border-right-style for the element, and set the value of the element's border-color. Set the top border as follows:

<style>
  .border-top {
    border-top-style: solid;
    border-top-color: red;
  }
</style>

<div class="border-top" pixel-border>Top border</div>

Set rounded border:

When you want a rounded border, always set a percentage value for border-radius. as follows:

<style>
  .border-radius {
    width: 100px;
    height: 100px;
    border-style: solid;
    border-color: red;
    border-radius: 10%;
  }
</style>

<div class="border-radius" pixel-border>Rounded border</div>

This concludes this article on the best way to solve the 1px border problem on mobile devices. For more information on solving the 1px border problem on mobile devices, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!