Screen size, pixels, resolution and devicePixelRatio

Introduction

When I first wrote the page, px was still curious about the 060dfd2bf19345 in the page. The resolution on the computer seemed to correspond to the width value of the page rendering, but this was not the case in the mobile phone. Remember to find the relevant information at that time. Know what's going on. Recently, I remembered this question again in my mind, but I don't know how to express it, and there is no related notes. I think it is necessary to distinguish the related concepts.

• Origin
• My GitHub

screen size

The screen size refers to the diagonal size of the screen, and the description often seen is inch (abbreviated in), 1 in = 2.54 cm.

Pixel

Pixel is the smallest controllable element of the image displayed on the 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 intensities of the three primary colors of red, green, and blue to represent a color, and the CMYK method uses the four pigment content of cyan, magenta, yellow, and black. To represent a color, CMYK color gamut is common in the printing industry and printers.

A pixel is generally considered the smallest unit in a digital image. In different contexts, the meaning of pixels may be different, such as pixels in a video, pixels in printing, pixels in a display screen, or pixels in a digital camera (photosensitive element). Depending on the context, there will be more precise synonyms, such as sampling point, byte, bit, superset, spot, etc.

Device pixel

Device pixels refer to the real pixels used in the device, also called 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, and is often used to measure the pixel density of computer display devices.

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

Theoretically, PPI can be calculated from the known diagonal size and screen resolution. It can be calculated by the following formula:

• w is the number of pixels in the horizontal direction
• h is the number of pixels in the vertical direction
• d is the screen size

For example, for a 21-inch screen with a resolution of 1920*1680, then w=1920, h=1680, d=21, and the calculated PPI=121.49.

CSS pixels

CSS pixel is a concept in programming, a unit used to logically measure pixels.

Resolution

Resolution (Image resolution) generally refers to the resolution of details of the measurement or display system. Described from different aspects, there are pixel resolution, spatial resolution, spectral resolution and time resolution. Most of the usual contact is pixel resolution, such as video resolution, display resolution, and graphics resolution. Only the pixel resolution category will be discussed here. Other types of related introduction are in here .

Screen Resolution

The screen resolution is the total number of pixels displayed on the screen, which can be broken down further into: physical resolution and display resolution.

• The 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 monitor resolution is the resolution set by the operating system. When the display resolution is the same as the physical resolution, the display effect is the best. Generally, the recommended resolution is the physical resolution. The resolution of the system setting takes effect after the algorithm is converted.

For example, viewing the information about the phone on the phone, you can see that the resolution information is 720*1280, which means that the screen has 720 pixels in the horizontal direction and 1280 pixels in the vertical direction.

Image Resolution

The image resolution is the total number of pixels contained in a unit inch. The expression of image resolution is also "number of horizontal pixels × number of vertical pixels". For example, the resolution of a picture is 320*289, which means that the picture has 320 pixels in the horizontal direction and 289 pixels in the vertical direction.

devicePixelRatio

This refers to window.devicePixelRatio Javascript, which is the ratio of physical pixels on the device to device-independent pixels (device-independent pixels, dips, dp). The formula is: devicePixelRatio = physical pixel / device independent pixel . This can also be interpreted as the CSS pixels to physical pixels. Simply put, it tells the browser how many physical pixels are needed to draw a CSS pixel. This attribute can be used to distinguish between retina devices and non-retina devices.

Device-independent pixels are also called logical pixels, which are a physical measurement unit based on the computer coordinate system. The application program tells the system of the independent pixels, and the system converts the device-independent pixels into physical pixels. The size defined by the device's independent pixels can be displayed in an appropriate size regardless of the screen parameters. On IOS retina devices, screen.width returns dips, and 060dfd2bf1b815 on screen.width devices is not necessarily dips.

Reference

• https://en.wikipedia.org/wiki/Pixel
• https://zh.wikipedia.org/wiki/%E5%83%8F%E7%B4%A0
• https://zh.wikipedia.org/wiki/%E4%BD%8D%E5%9B%BE
• https://en.wikipedia.org/wiki/Pixel_density
• https://en.wikipedia.org/wiki/Image_resolution
• https://zh.wikipedia.org/wiki/%E5%88%86%E8%BE%A8%E7%8E%87
• https://www.jianshu.com/p/c3387bcc4f6e
• https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
• https://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
• https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
• https://en.wikipedia.org/wiki/Device-independent_pixel
• http://yunkus.com/physical-pixel-device-independent-pixels/
• https://segmentfault.com/a/1190000011753855