What mobile developers need to know about pixels

[[124454]]

Pixels are very familiar to web developers, who have dealt with them a lot in the PC Internet era. After entering the mobile Internet, as the resolution of mobile device screens has become higher and higher, some new concepts about screens and pixels have emerged, such as DPI, DP, PT, Retina, 4K, etc. This article briefly introduces these concepts.

DPI vs PPI

DPI (Dots Per Inch) is used in the printing industry to measure the density of spatial dots. This value is the number of ink dots that a printer can spray per inch. Computer display devices borrowed the concept of DPI from printers. Since the atomic unit in computer display devices is not ink dots but pixels, PPI (Pixels Per Inch) was created. This value is the number of pixels per inch of the screen, that is, pixel density. For various reasons, PPI (mainly iOS) and DPI (for example, in Android) are currently used in the parameter description of computer display devices, but the meanings of the two are the same, both representing pixel density.

Elements displayed on a high PPI screen will be finer (appear smaller), while elements displayed on a low PPI screen will be relatively coarse (appear larger). Let's take a look at the difference in element display under different PPIs through a picture:

HD vs 4K

The two most popular keywords for mobile devices and smart TVs nowadays are probably HD and 4K. Both are standards used to describe the resolution of display devices. What is the difference between the two?

The resolution of HD (High-Definition) is higher than 1280x720px or 720p.

The resolution of Full HD is higher than 1920x1080px. Currently, this resolution is used by mainstream TVs and high-end mobile phones (such as Galaxy SIV, HTC one, Sony Xperia Z, Nexus5, etc.).

The resolution of 4K (also called Quad HD or Ultra HD) starts at 3840x2160, which is mainly the resolution of current high-end TVs; it also has a higher standard of 4096x2160, which is mainly used for movie projectors or professional cameras.

Retina

Retina display is a term that Apple came up with when it released the iPhone 4. It is called a retina display because the PPI of the screen is too high, and the human retina cannot distinguish the pixels on the screen. The PPI of the iPhone 4/S is 326, twice that of the iPhone 3G/S, as shown in the following figure:

Since the number of pixels in the width and height of the screen has doubled, the content that was previously rendered with one pixel on a non-Retina screen will be rendered with 4 pixels on a Retina screen: 1x1px(non Retina) = 2x2px(Retina) , so the content of the element will become fine, for example:

Note that Retina display is a naming method registered by Apple. Other manufacturers can only use HI-DPI or other naming methods, but the meaning is the same, that is, the PPI of the screen is very high.

DP/PT/SP

As the PPI of mobile device screens continues to increase, the previous method of using physical pixels to measure display elements is no longer effective for developers. To solve this problem, both platforms have proposed the concept of abstract pixels: iOS calls it PT (Point) and Android calls it DP/DiP (Device independent Pixel). If there is no special explanation, DP is used in the following descriptions.

For example, a 44x44dp element is equivalent to 44x44px on non-Retina screens and 88x88px on Retina screens (quadrupling the size).

SP (Scale-independent pixel) is a pixel that has nothing to do with scale. Like DP and PT, it is an abstract pixel, but it is used to describe the size of the font.

Handling PPI in iOS

The method of handling different PPI displays in iOS is very simple: first, define at what PPI 1DP is equal to 1px, and use this PPI as the benchmark (1x multiplier). If the PPI of the display device is twice the benchmark PPI, then 1DP is equal to 2px (2x multiplier), which is actually a simple elementary school multiplication.

In the iPhone series, 3G/S is 1x multiplier, and others are 2x multiplier:

In the iPad series, iPad 1st and 2nd generation have 1x multiplier, and others have 2x multiplier:

In the iPad Mini series, the iPad Mini generation has a 1x multiplier, and the others have a 2x multiplier:

In iOS, the same application displays different resources on non-Retina screens and Retina screens. The rule is: name.png is a non-Retina resource, [email protected] is a Retina resource. So for designers, you need to consider Retina and non-Retina screens when designing. See the following example:

Handling PPI in Android

Since the Android system is an open system, there are many PPIs to adapt to, so it divides PPI very finely:

• ldpi (low) ~120dpi
• mdpi (medium) ~160dpi
• hdpi (high) ~240dpi
• xhdpi (extra-high) ~320dpi
• xxhdpi (extra-extra-high) ~480dpi
• xxxhdpi (extra-extra-extra-high) ~640dpi

You just need to put the resources of the corresponding dpi into the corresponding directory. Android will automatically select resources based on the dpi. The directory rules are as follows:

• drawable-mdpi/asset.png
• drawable-hdpi/asset.png
• drawable-xhdpi/asset.png
• ...

It can be seen that the PPI represented by mdpi in Android is the same as that represented by 1x multiplier in iOS, and the PPI represented by xhdpi is the same as that represented by 2x multiplier in iOS, as shown in the figure:

refer to

• http://sebastien-gabriel.com/designers-guide-to-dpi/home
• http://developer.android.com/guide/practices/screens_support.html

(over)

Author: JeremyWei | Reprinting is allowed, but the original source of the article, author information and copyright statement must be indicated in the form of a hyperlink

URL: http://weizhifeng.net/you-should-know-about-dpi.html