Mobile development tutorial: Summary of pixel display issues

Preface

I believe that in the process of mobile terminal development, everyone will find that the display of mobile terminal is generally different from that of desktop terminal. For example, when displaying a block element of 1334x750 pixels on iPhone 6, although the nominal screen pixel density of iPhone 6 on Apple's official website is 1334x750, we find that this block element of 1334x750 pixels cannot cover the entire screen.

So why is that? The following will discuss this from several aspects.

Pixel density (PPI)

PPI (Pixel Per Inch) means how many pixels there are per inch, which is similar to population density and building density. The following figure shows several examples of PPI representation.

Taking iPhone 6 as an example, the general calculation formula for pixel density is: Math.sqrt(1366*1366 + 640*640)

But to calculate this PPI, we first need to know how many pixels there are on the device's screen, which is the first pixel in Pixel Per Inch.

Device Pixels (DP) && Device Pixel Ratio (DPR)

Device pixel, also known as physical pixel, is the screen specification of iPhone 6 mentioned at the beginning of this article. The pixels referred to in pixel density are device pixels. For general display devices, one pixel corresponds to a luminous point on the screen, so PPI is also called DPI (dots per inch), but this is only equivalent on display devices, such as on printers.

Since the screen specifications of each mobile phone on the market are different, some are 720P, some are 1080P, and even 2K, etc., some of these devices have more pixels and some have fewer pixels. If the same pixel is displayed, the following situation will appear:

The higher the PPI of the screen, the smaller the area that displays a pixel. If a picture composed of 4x4 pixels is displayed on a screen with a PPI of 64, then it will be reduced to half of its original size when displayed on a screen with a PPI of 256.

Conversely, if you want the display effect on a screen with a PPI of 256 to be the same as that on a screen with a PPI of 64, you have to enlarge the image by 2 times.

Therefore, for mobile phones equipped with high-definition screens, in order to ensure the usability of their devices, that is, icons and texts can be correctly identified and clicked accurately, manufacturers must ensure that all kinds of materials are displayed on their devices the same as on standard-definition devices. The solution is to enlarge all sizes several times. This magnification ratio is called the device pixel ratio (DPR). Generally, DPR corresponds to the following table:

Therefore, high-definition devices should be equipped with high-definition image display, otherwise the image will not have enough pixels to display its details after being enlarged on the high-definition device, and the image will become very blurry.

CSS Pixels

After talking about so many concepts, it seems that the question at the beginning of the article has not been explained well. After discussing CSS pixels below, I guess everyone will have a clearer concept.

We often use the pixel unit px when writing CSS, but this pixel unit does not always correspond to the device pixel one-to-one. That is to say, 1px (pixel) in CSS does not correspond to a pixel on the device screen. In order to distinguish it from device pixels, the pixels px referred to in CSS are generally referred to as CSS pixels. That is to say, CSS pixel is a virtual, relative unit.

For example, if we draw a 300px wide block element on a page, it will only take up a part of the screen on a normal monitor, but if we manually zoom in on the page, the block element will soon fill the entire page. This shows that, in general, the CSS pixel is equal to the pixel size at the system resolution, that is, in a standard-definition device, a CSS pixel should be equal to a device pixel size. However, on high-definition devices or when the user is zooming in and out, one CSS pixel may be equal to multiple device pixels.

To give another example, in mobile native application development, if you have to develop in units of one device pixel, it will be a very painful thing, because not every mobile device's system resolution corresponds to one device pixel, some are 1:2, and some are 1:2.46. It is precisely because of this difference that there are units such as dp and dt in Android development (there are pt units in iOS). When we define the size of an element, we only need to give a dp value. The system will convert this value with the ratio of system resolution to device pixels (ie DPR), and finally calculate the actual device pixels displayed on the screen.

The abstract unit of dp mentioned above is called device independent pixel. Of course, CSS pixels are also device-independent pixels. When we write CSS pixels, we don’t need to worry about how many device pixels one CSS pixel corresponds to. The system will automatically calculate it for us based on DPR. All we need to worry about is how to ensure that when the web page elements are enlarged due to system conversion, they can still be clearly displayed on the device.

Viewport

Normally, when you open a page on a mobile device, the browser will first render the page at a normal ratio, and then automatically set a ratio to scale the page. This is to better display the content, that is, the page content just fills the entire mobile phone screen. Of course, if the page does not prohibit users from scaling, you can also use two fingers to scale the page back to the original ratio. This whole process is achieved through the viewport. After the original page is rendered, it is scaled through the viewport to make it the same as the system width, so that the page can be fully displayed.

(Picture from tgideas team blog)

We can control the scaling of the viewport when rendering by adding the inital-scale property to content. Setting it to 1 means no scaling.

<meta name="viewport" content="initial-scale=1">

We can also define the device-width property to control the width of the viewport

<meta name="viewport" content="width=device-width">

Generally, in mobile development, we will set it to not allow users to zoom, and set the maximum and minimum zoom ratios to 1.

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

Summary

After reading materials and exploring for several days, I finally have a complete and accurate understanding of the most entry-level parts of mobile development. Before, I just copied the code from meta and used it without figuring it out. This time, I took advantage of my free time and the relevant materials on hand to go through it as a whole, and finally recorded it in this document, hoping that it will be helpful to everyone in the future.

Participation Information:

1. In-depth understanding of viewport and px

2. High-performance responsive web development practice