Essential Knowledge for Device Adaptation (DPI, PPI, Resolution, Screen Size)

Introduction

This article summarizes key points about device adaptation.

Device Pixel

A device pixel is the smallest physical display unit on a screen (or other devices). Each device pixel can display color through red, green, and blue subpixels.

Note that this is a relative unit; the size of device pixels varies depending on the display technology (e.g., LCD, OLED, LED). For example, on a Mac, a device pixel is 0.0213cm, while on an iPhone 6, a device pixel is 0.0018cm.

Screen Resolution

Resolution can be divided into two categories: (screen) device resolution and image resolution.

Image resolution: Refers to the number of pixels in an image, usually expressed as the number of horizontal and vertical pixels. For example, an image with 100x100px resolution has an image resolution of 100x100px.

Screen (device) resolution: Applicable to electronic screens, device resolution reflects the detail and clarity of images handled by the hardware, indicating the maximum number of physical pixels that can be displayed in width and height.

For example, the iPhone 6 has a screen resolution of 750x1334px, meaning the iPhone 6 screen has 750 device pixels horizontally and 1334 device pixels vertically.

A 4K display typically refers to a screen with a resolution of 4096x2160px.

Screen Ratio and Screen Resolution

Let's also mention screen ratio, which we commonly refer to as 21:9 or 16:9. This ratio can be derived from the resolution by finding the greatest common divisor.

function gcd(x, y) {
  if (x % y == 0) return y
  return gcd(y, x % y)
}

For example, the 4K screen with a resolution of 4096x2160px has a screen ratio of 4096/2160 = 1.89629. Finding the greatest common divisor gives 21:9, which is more intuitive for comparing different screens than using 7:3.

For instance, a 21:9 screen is wider compared to a 16:9 screen.

Screen Size

Screen size refers to the diagonal length of the screen, measured in inches. For example, the iPhone 6 has a screen size of 4.7 inches, and a 13-inch MacBook has a screen size of 13.3 inches.

Relationship Between Screen Size, Resolution, and Device Pixels

With the same resolution: A larger screen will distribute pixels more widely, making each pixel's actual size larger. Conversely, a smaller screen will pack pixels more tightly, making each pixel's actual size smaller.

With the same screen size: A higher resolution screen will have more pixels in the same physical size, making each pixel's actual size smaller. For example, a 4.7-inch iPhone 6 has a resolution of 750x1334px, while a 4.7-inch HTC One has a resolution of 1080x1920px.

This explains why phone resolutions are high; because phone screens are small, a higher resolution is needed to display images more clearly.

PPI (Pixels Per Inch)

Screen pixel density, an actual unit, represents the number of pixels per inch (1 inch = 2.54 cm), where an inch is the diagonal length.

Also, DPI (Dots Per Inch) needs mentioning. The concepts are similar but applied in different fields:

DPI is usually used for printers.
PPI is usually used for screens.

Conversion Relationships

Resolution, PPI (pixels per inch), and screen size can be calculated through formulas (it's just simple Pythagorean theorem):

Calculate total pixels: Total pixels = Horizontal pixels × Vertical pixels
Calculate resolution: Resolution = Horizontal pixels × Vertical pixels
Calculate PPI: PPI = √(Horizontal pixels^2 + Vertical pixels^2) / Screen diagonal size
Calculate screen size: Screen size = √(Horizontal pixels^2 + Vertical pixels^2) / PPI

For example, the Xiaomi 12 has a screen size of 6.28 inches and a resolution of 2400x1080px, giving it a PPI of 419.

Xiaomi 12 PPI

CSS Pixel (Logical Pixel)

A CSS pixel is a relative unit, an abstract unit independent of devices, defined to make it easier for developers to use units when developing web pages.

Device Pixel Ratio (DPR)

Device Pixel Ratio (DPR) refers to the ratio between physical pixels and CSS pixels in web development.

For example, the iPhone 5 uses a Retina display, representing 1x1 CSS Pixel with 2x2 Device Pixels, so the device pixel count is 640x1136px, while the CSS logical pixel count is 320x568px.

The DPR can be obtained through window.devicePixelRatio.

Relationship Between DPR and Page Zoom

In fact, page zooming does not directly change the device pixel ratio (DPR), as DPR is usually a fixed device attribute, representing how many physical pixels are required to present a CSS pixel on a particular device.

Why does window.devicePixelRatio change when we zoom in on the page?

For example, on a Mac with a DPR of 2, zooming the page to 200% changes the window.devicePixelRatio value to 4.

DPR with Page Scale

When users zoom the page, the browser may simulate a change in DPR. Zooming in simulates a higher DPR, mapping CSS pixels to more physical pixels, making the content appear larger. Conversely, zooming out simulates a lower DPR, making the content appear smaller.

This simulation allows users to change the display size without altering the device's hardware attributes. Therefore, during page zooming, the window.devicePixelRatio value changes, but this does not mean the actual device pixel ratio has changed; it's just a simulation by the browser.