Fully Understanding px, dpr, dpi, dip

Preface

I've been working with media queries for a while, and it took me a lot of time to understand what all these terms actually mean.

Device Pixels

Device Pixels: The physical pixels of a device screen, unit is px, for example iPhone6's 750x1334px.

P.S. This represents how many dots can be displayed on the screen, not an absolute length unit (such as in, mm), because my dots and your dots may be different sizes.

Resolution

Resolution is also a physical concept, and its meaning depends on the context.

For screens, resolution generally represents the total sum of physical pixels displayed. For example, we say the iPhone6 screen resolution is 750x1334px.

For images, the concept is equivalent to image dimensions, image size, pixel dimensions, etc. For example, we say a 20x20px icon.

P.S. Actually, strictly speaking, the unit of image resolution is ppi (Pixels Per Inch). For an image file, its pixel dimensions are fixed. It may contain meta information from the camera, such as resolution 200ppi. This value is just a suggestion; the size we see when the image is displayed is determined by the screen's pixel density. The higher the pixel density, the smaller the image appears.

CSS Pixels

CSS Pixels: A web programming concept, referring to the logical pixels used in CSS style code.

Therefore, 1 CSS pixel may correspond to different numbers of physical pixels on different devices. This ratio is a device attribute (Device Pixel Ratio).

In the CSS specification, length units can be divided into absolute units and relative units. px is a relative unit, relative to Device Pixels. For example, iPhone5 uses a Retina display, using 2x2 Device Pixels to represent 1x1 CSS Pixel, so the device pixel count is 640x1136px, while the CSS logical pixel count is 320x568px.

Device Pixel Ratio

Device Pixel Ratio is abbreviated as DPR or DPPX, as follows:

Device Pixel Ratio: Number of device pixels per CSS Pixel
Dots Per Pixel: the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).

Generally we say DPR. Wiki definition:

Device pixel ratio, the ratio between physical pixels and logical pixels used by cascading style sheets (CSS): other names for it are "CSS Pixel Ratio" and "dppx"

Therefore, device pixel ratio represents how many physical pixels (width) equal 1 CSS pixel (width):

DPR = physical pixel count / logical pixel count

For example, when dpr=2, 1 CSS pixel consists of 4 physical pixel points. See the explanation of CSS pixels above.

P.S. DPR is not a unit, but an attribute name. For example, in a browser you can get the screen's DPR through window.devicePixelRatio.

Special note: zxx's statement:

window.devicePixelRatio is the ratio of physical pixels to device-independent pixels (dips) on a device.

The formula is: window.devicePixelRatio = physical pixels / dips

Here, "device-independent pixels" refers to logical pixels, i.e., CSS pixels, which is also an attribute name. Don't confuse it with Android's unit dip/dp. The two have nothing to do with each other. Although the English is the same and the meaning is similar, that's Android's own thing and not universal.

Pixel Density

Pixel density is also called display density or screen density, abbreviated as DPI (Dots Per Inch) or PPI (Pixel Per Inch). The meaning is the same.

Professionals generally say PPI. There are subtle differences:

ppi and dpi (dots per inch). Technically speaking, "pixels" (p) only exist in the field of computer displays, while "dots" (d) only appear in the field of printing or publishing.

We often see screens of the same size having different pixel dimensions, which is the difference in DPI. For example, the 4.7-inch iPhone6 has pixel dimensions of 750x1334px, while the 4.7-inch HTC One has pixel dimensions of 1080x1920px.

Pixel density is easy to calculate. For example, iPhone6's:

// Diagonal pixel dimension of screen / physical dimension (inch)
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi

Real-life examples:

When Windows settings change resolution, it should be changing ~~pixel density~~ (pixel density is an attribute, fixed and unchanging, because the screen's physical pixel dimensions and physical size are fixed) device pixel ratio. Therefore, the same image displays at different sizes on devices with different resolutions. ~~Pixel~~ The lower the device pixel ratio, the higher the logical resolution (when dpr=1, logical resolution = physical resolution), and the smaller the image display size (measure the screen with a ruler). For example, desktop icons/fonts at Windows 1920x1080 resolution are smaller than at 1366x768. Image viewing tools can enlarge an image, but this actually increases width and height pixel count by simulating pixel data through software interpolation, so it becomes unclear (distorted) when enlarged too much. The same problem exists when shrinking.

At the final moment of output: such as display, printing, or photo development, the DPI setting is the key setting that ultimately determines the output size. The 180DPI or 72DPI marked when the camera forms a file is just a temporary parameter. That's why you can have passport photos, 2-inch photos, etc. when developing pictures.

The DPI shown in EXIF in cameras or the DPI shown in Photoshop is just data that the camera or PS arbitrarily assumes for your final output target. Because the camera and PS don't know what DPI printer you'll ultimately use, or whether you're just putting it on the internet, they just arbitrarily assume a number, which actually has no meaning.

Device-Independent Pixels

Generally refers to what Google proposed to adapt to Android's vast array of strange screens. Windows also has this concept, but with different meaning. iOS doesn't seem to have the concept of device-independent pixels.

Device-independent pixels as a unit generally refers to something in Android development, abbreviated as DIP (Device Independent Pixels) or DP (Density-independent Pixels). The meaning is completely consistent.

The characteristic of Android devices is that there are many screen sizes. Therefore, to make display as device-independent as possible, dip was proposed, with a reference density of 160. The calculation formula is:

// When screen density is 160 (unit is ppi or dpi, same meaning), px === dip
px = dip * density / 160 
// Therefore
dip = px * 160 / dpi

Of course, both formulas only apply to Android devices. This dip has no meaning when used elsewhere.

Viewport

On desktop, viewport width equals browser width, but it's different on mobile phones.

Layout Viewport

On mobile phones, to accommodate websites designed for desktop browsers, the default layout viewport width is much larger than screen width. To let users see the full website, it shrinks the website.
Visual Viewport

The visible area of the screen, i.e., physical pixel dimensions.
Ideal Viewport

Used when the website is prepared for mobile phones. Declared through meta. Early iPhone ideal viewport was 320x480px.

Therefore, without zooming, the CSS pixel width of the screen actually refers to the ideal viewport width. And the meta tag:

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

Specifies layout viewport = ideal viewport, and disables zooming. So after adding the viewport meta with width=device-width, the page becomes larger (initially the page content was too small to read clearly). Actually, the layout viewport becomes smaller.