We know that when we display our PC pages on mobile, there will be layout errors. So we need to do mobile adaptation to make the page more suitable.

First let’s take a look at some concepts related to mobile screens and pixels.

The screen size

The diagonal length of a screen, in inches. Common sizes: 3.5 inches, 4.7 inches, 5.0 inches, 5.5 inches, 6.0 inches and so on.

Note: 1 inch = 2.54 cm (cm)

Screen resolution

Refers to the total number of physical pixels on a screen in: landscape and portrait. The general notation is n * m.

For example, the iPhone 6 has a screen resolution of 750 x 1334

  • Note:

    • Screen resolution is a fixed value, screen production is determined, cannot be modified!!
    • Screen resolution and display resolution are two concepts. The display resolution can be modified in system Settings.
    • Display resolution is the number of physical pixels currently used by the device. It can also be said that screen resolution >= display resolution.

Common Mobile phone resolutions

model Resolution (sum of physical pixels)
IPhone 3G / 3GS 320 * 480
IPhone 4 / 4s 640 * 960
IPhone 5 / 5s 640 * 1136
IPhone 6 / 7 / 8 750 * 1334
IPhone 6p / 7p / 8p 1242 x 2208
IPhone X 1125 * 2436
Huawei P30 1080 * 2340

The density of the screen

Pixels per inch (PPI) is the number of physical pixels per inch (pixels per inch) on a screen. Dots per inch (DPI) is also available in pixels per inch (PIXELS per inch). The two values are calculated in the same way, but in different scenarios. Ppi is used to measure screens, DPI is used to measure printers, etc.

Physical pixel

Also known as device pixel, a physical pixel is a unit of length, in the unit px.

A physical pixel is a physical image point on the screen. It is a tiny glowing physical device on the screen (simply known as a super tiny light bulb), and it is the smallest particle size that can be displayed on the screen.

It is determined by the screen manufacturer and cannot be modified after the screen is produced. For example, iPhone 6 has 750 physical pixels horizontally and 1334 vertically. We can also use 750* 1334.

Physical pixel illustration:

CSS pixel

Also known as a logical pixel, a CSS pixel is an abstract unit of length, also known as px, created for Web developers to accurately measure the size of content on a Web page.

We use CSS pixels in writing CSS, JS, and less.

How many physical pixels does the 1px (CSS pixel) I wrote in my code correspond to on the screen? Does every CSS pixel correspond to every physical pixel (” light bulb “)? To explore this correspondence, learn the next new concept: device-independent pixels.

Device independent pixel

Device independent pixel is referred to as DIP or DEVICe-independent Pixel (DP), also known as screen density-independent pixel.

Introduction: In the pre-HD screen era, every CSS pixel corresponds to every physical pixel, but since the advent of THE HD screen, the relationship between the two is no longer one-to-one. In 2010, Apple introduced a new display standard: squeezing more physical pixels into a single screen while keeping the screen size the same, resulting in higher resolution and a more detailed display. Apple called it the Retina screen, and at the same time it introduced its game-changing digital device, the iPhone4.

Here’s a scene:

The programmer wrote: Width = 2px, height = 2px box, if 1 CSS pixel directly corresponds to 1 physical pixel, because iPhone3G/S and iPhone4 screen size is the same, but iPhone4 screen can accommodate more physical pixels, So the physical pixels of iPhone4 are much smaller than iPhone3G/S, so in theory the box on iPhone4 screen will be much smaller than iPhone3G/S screen, but in fact iPhone3G/S and iPhone4 under the box is the same size!! But the iPhone4 is much more subtle and crisp. How do you do that? This depends on device-independent pixels.

Comparison: iPhone3G/S and iPhone4 imaging effect:

The advent of device-independent pixels makes it possible for elements to have normal size even in [HIGH definition] (such as Apple’s Retina display), so that code is not affected by the device, which is set by the device manufacturer according to the characteristics of the screen and cannot be changed.

Relationship between device-independent pixels and physical pixels

  • There is one physical pixel for each device independent pixel under the normal screen
  • There are N physical pixels for each device independent pixel under the HD screen

Relationship between device independent pixels and CSS pixels

  • Without scaling (standard case) : 1 CSS pixel = 1 device independent pixel

Pixel than

Pixel ratio (DPR) : The ratio of device physical pixels to device independent pixels in a single direction. That is, DPR = physical pixels/device-independent pixels. It can be obtained from JS.

window.devicePixelRatio
Copy the code

Click here to see more screen pixel parameters for several phones

model Resolution (sum of physical pixels) Device independent pixel (DIP or DP) Pixel ratio (DPR)
IPhone 3GS 320 * 480 320 * 480 1
IPhone 4 / 4s 640 * 960 320 * 480 2
IPhone 5 / 5s 640 * 1136 320 * 568 2
IPhone 6 / 7 / 8 750 * 1334 375 * 667 2
IPhone 6p / 7p / 8p 1242 x 2208 414 * 736 3
IPhone X 1125 * 2436 375 * 812 3
HUAWEI P10 1080 x 1920 360 x 640 3

The relationship between pixels

Without considering scaling (ideally) :

  • Common screen (DPR = 1) : 1 CSS pixel = 1 Device pixel = 1 physical pixel
  • Hd screen (DPR = 2) : 1 CSS pixel = 1 Device independent pixel = 2 physical pixel
  • Hd screen (DPR = 3) : 1 CSS pixel = 1 Device independent pixel = 3 physical pixel

For a box with width of 100px, then:

1. 100 CSS pixels.

2. If the user does not zoom in or out, the device has 100 independent pixels.

3. On a device with a DPR of 2, these 100 CSS pixels occupy 100*2=200 physical pixels (landscape).

Describe your screen:

Now using the iPhone6 as an example, let’s describe the screen (landscape top) :

  1. Physical pixel: 750px
  2. Device independent pixel: 375px
  3. CSS pixel: 375px

The next two installments

Finally figured out mobile terminal development this time (2)

Finally figured out mobile terminal development this time (3)