Understanding and solutions of 1px line in mobile development

Reasons why the 1px line becomes thicker

When working on mobile projects, we often set the size and style of element nodes according to the design drawings. However, sometimes the style written according to the design drawings is still not satisfactory. Although it looks the same as the design draft on the surface, it just doesn’t have the feeling of the design draft, and there is an inexplicable sense of copycat. When reviewing the UI, we often feel that the dividing line or border line is too thick and should be thinner. But when we look at the code, it is already 1px, why does it still look so thick?

To understand the cause of the problem, we must first understand a few concepts:

(1) Physical pixel

A physical pixel is the smallest physical display unit (pixel particle) on a display (mobile phone screen). Under the scheduling of the operating system, each device pixel has its own color value and brightness value. For example, there are 750*1334 physical pixel particles on iPhone 6.

(2)Density-independent pixel

Device-independent pixels (also called density-independent pixels) can be considered as a point in the computer coordinate system. This point represents a virtual pixel that can be used by the program (for example, CSS pixels). Sometimes we also call it a logical pixel. It is then converted into physical pixels by the relevant system. Therefore, there is a certain correspondence between physical pixels and device-independent pixels, which is the device pixel ratio we will talk about next.

(3) Device pixel ratio (DPR)

The device pixel ratio (DPR for short) defines the correspondence between physical pixels and device-independent pixels. Its value can be obtained according to the following formula:

Device pixel ratio (dpr) = physical pixel / logical pixel (px) // In a certain direction, x direction or y direction, the following figure dpr = 2

Knowing the device pixel ratio, we roughly know why the 1px line becomes thicker. Simply put, the resolution of mobile phone screens is getting higher and higher. A mobile phone of the same size has more actual physical pixels. Because different mobile devices have different pixel densities, the 1px we write on different mobile devices is equal to 1px of this mobile device. Now when doing mobile terminal development, you usually have to add a sentence:

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

This sentence defines the width of the viewport of this page as the device width, the initial zoom value and the maximum zoom value are both 1, and user zooming is prohibited.

The viewport settings and the physical screen resolution are proportional but not the same. The mobile window object has a devicePixelRatio property, which represents the ratio of device physical pixels to CSS pixels. On retina iPhones, this value is 2 or 3. The 1px length written in CSS is mapped to 2px or 3px on physical pixels. By setting the viewport, you can change how many physical pixels are used to render 1px in CSS. If you set different viewports, of course the 1px lines will look inconsistent in thickness.

Solution to 1px line thickening

Pseudo-class + scale

The principle of this method is to remove the border of the original element, and then use :before or :after to redo the border. The original element is relatively positioned, and the new border is absolute. The scale of the transform is used to reduce the line height by half, and the new border is equivalent to 0.5px. The code is as follows:

.scale{

  position: relative;

  border:none;

}

.scale:after{

  content: '';

  position: absolute;

  bottom: 0;

  background: #000;

  width: 100%;

  height: 1px;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}

Using flexible.js

As mentioned before, the reason why 1px becomes thicker is that the viewport width is set in a one-size-fits-all manner. If the viewport width can be set to the actual physical width of the device, then 1px in the CSS will be equal to the actual 1px length. The principle of flexible.js is this: first get the device pixel ratio devicePixelRatio, and then dynamically set the viewport value according to the scaling ratio. The result is that no matter which device, 1px always represents 1 device pixel, that is, the minimum pixel of the device.

//When devicePixelRatio=2, the output meta is as follows <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//When devicePixelRatio=3, the output meta is as follows <meta name="viewport" content="initial-scale=0.33333333333333333, maximum-scale=0.33333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

Use meta viewport control

The principle is as above. The code is as follows:

//1px pixel line <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

//0.5 pixel line <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

Use box-shadow to simulate borders

Use CSS to process shadows to achieve a 0.5px effect. The code is as follows:

.box-shadow-1px {

  box-shadow: inset 0px -1px 1px -1px #c8c7cc;

}

Using border-image

First, you need to make a 0.5 pixel line as the line background image. . The code is as follows:

p{

    border-width: 0 0 1px 0;

    border-image: imageUrl 2 0 round;

}

Using background gradient linear-gradient

Use linear-gradient to gradient the background image from colored to transparent. The default direction is from top to bottom. The color from 0deg to 50% is the border color, and the bottom half is transparent. Then set the background width to 100%, the height to 1px, and remove repeat, so the colored border is 0.5px. The code is as follows:

.bg_border {

    background-image: linear-gradient(0deg,black 50%,transparent 50%);

    background-size: 100% 1px;

    background-repeat: no-repeat;

}

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM.