Screen size, pixels, resolution and devicePixelRatio

primers

At the beginning of writing the page, I was curious about the px in the page. The resolution on the computer seemed to be exactly the same as the width of the page rendered, but it was not the same on the phone. I still remember looking for relevant information at that time, as if I knew what was going on. Recently, this question came to my mind again, but I didn’t know how to express it and I didn’t have relevant notes, so I felt it was necessary to distinguish related concepts.

Origin

My GitHub

The screen size

Screen size refers to the diagonal size of the screen, often described as inches (abbreviated in), 1 in = 2.54 cm.

pixel

A pixel is the smallest controllable element of an image on a screen. It is not a point or a square, but an abstract sample. Each pixel has a color, and the color is usually represented by 3 or 4 components. For example, the RGB method uses the optical intensity of red, green and blue primary colors to represent a color, and the CMYK method uses the content of blue, magenta, yellow and black pigments to represent a color. The CMYK color gamut is common in the printing industry and printers.

A pixel is generally considered the smallest unit in a digital image. Pixels can mean different things in different contexts, such as pixels in video, pixels on a print, pixels on a display screen, or pixels in a digital camera (a light-sensitive element). Depending on the context, there are some more precise synonyms, such as sampling point, byte, bit, superset, spot, etc.

Equipment pixel

Device pixels are the real pixels used in the device, also known as physical pixels. In the same device, the total number of pixels is fixed.

Pixel density PPI and DPI

PPI (Pixels per Inch) refers to the number of pixels per inch. It is commonly used to measure the pixel density of computer display devices.

DPI (dots per inch) is the number of dots per inch of digital printing and is used to measure the density of spatial points in the printing industry.

In theory, PPI can be calculated from a given diagonal size and screen resolution. It can be calculated by the following formula:

W is the number of pixels in horizontal direction
H is the number of pixels in the vertical direction
D is screen size

For example, for a 21-inch screen with 1920*1680 resolution, w=1920, H =1680, d=21, put in PPI=121.49.

CSS pixel

CSS pixels are programming concepts used to logically measure units of pixels.

The resolution of the

Image resolution generally refers to the resolution ability of measuring or displaying system to details. It is described from different aspects, including pixel resolution, spatial resolution, spectral resolution and time resolution. Most of the ordinary contact is pixel resolution, such as commonly referred to as video resolution, display resolution and graphics resolution. Only pixel resolution categories are discussed here. Related descriptions of other types are available here.

Screen resolution

Screen resolution is the total number of pixels displayed on the screen, broken down into physical resolution and monitor resolution.

Physical resolution is an inherent parameter of the display and cannot be adjusted. It generally refers to the maximum number of pixels that can be displayed on the screen.
The display resolution is the resolution set by the operating system. Display results are best when the display resolution is consistent with the physical resolution, which is generally recommended. System setting resolution is converted by algorithm.

For example, if you look at the information on the phone, you can see that the resolution information is 720 x 1280, which means that the screen has 720 pixels horizontally and 1280 pixels vertically.

Image resolution

An image resolution is the total number of pixels per inch. The expression of image resolution is also “horizontal pixel number × vertical pixel number”. For example, if the resolution of an image is 320 x 289, that means the image has 320 pixels horizontally and 289 pixels vertically.

devicePixelRatio

DevicePixelRatio refers to window.devicePixelRatio in Javascript, which is the ratio of physical pixels to device-independent pixels (DIPs, DP) on the device. The formula is: devicePixelRatio = physical pixels/device-independent pixels. This can also be interpreted as the ratio of CSS pixels to physical pixels. In simple terms, it tells the browser how many physical pixels it needs to draw a CSS pixel. This property can be used to distinguish retinal devices from non-retinal devices.

Device-independent pixels, also called logical pixels, are physical units of measurement based on the computer coordinate system. The application program informs the system of the device-independent pixels, and the system converts the device-independent pixels into physical pixels. Sizes defined in device-independent pixels can be displayed at the appropriate size regardless of screen parameters. On IOS retinal devices, screen.width returns dips, not necessarily dips on Andioid devices.