The pixel and DPR of mobile web development

[1] definition [2] classification [3] scaling [4]DPR[5]API front words

Pixels are used almost every day in web development, but what exactly is a pixel, is there a difference between the pixel on the mobile and the desktop, and how does scaling affect the pixel, and what does the retina screen have to do with pixels? On these issues, it may be unclear. This article will introduce you to the relevant knowledge about pixels

Defined

Pixels, also known as the picture element, is the basic unit of the image display, translated from English "Pixel", the pix is a common shorthand for the English word picture, and with the English word "elements" element, it gets pixel, so "pixels" means "image elements", sometimes called PEL ( Picture element)

Pixels are the basis of a page layout. A pixel is the smallest area in which a computer can display a particular color. When the device is the same size but the pixels become denser, the screen can display a more detailed transition and the site looks more crisp.

PPI refers to the number of pixels that can be displayed per inch on the screen, that is, the screen pixel density.

Classification

There are actually two types of pixels: device pixels and css pixels

1, device independent pixels: the physical pixels of the device screen, the number of physical pixels of any device is fixed

2, css pixels (css pixels): Also known as logical pixels, is created for Web developers, in CSS and JavaScript used in an abstract layer

The pixels we set through CSS and JavaScript code are logical pixel WIDTH:300PX;FONT-SIZE:16PX;

Scaling

On the desktop side, the CSS's 1 pixels are often the 1 physical pixels that correspond to the computer screen.

A CSS pixel completely covers a device pixel

　

On the mobile side, scaling is a recurring operation due to screen size limitations.

Device pixels (dark blue background), CSS pixels (translucent background)
The left image indicates that a device pixel overlays multiple CSS pixels when the user zooms out
The right image indicates that a CSS pixel overlays multiple device pixels when the user zooms in

Regardless of whether we zoom in or out, the CSS pixels set by the element (such as width:300px) are always constant, and how many device pixels a CSS pixel corresponds to depends on the current zoom ratio.

DPR

Device pixel ratio DPR (devicepixelratio) is the ratio of the number of device pixels to the ideal viewport

DPR = device pixel/Ideal viewport

In general, the ideal viewport is the device wide and high size

In previous mobile devices, there was no concept of DPR. With the development of technology, the screen pixel density of mobile devices is getting higher. Starting with iphone4, Apple unveiled the so-called Retina Retina screen. It is called the retina screen because the screen's PPI (screen pixel density) is too high for the human retina to distinguish the pixels on the screen. The resolution of the iphone4 is increased by one-fold, but the screen size does not change, which means that the same size of the screen, the pixel is one more times, so DPR = 2

Take iphone5 as an example, the ideal viewport for iphone5 is 640px*1136px, and the device pixel is 320px*568px. So Iphone5 's dpi=2

    640 (PX)/(px)  = 2    1136 (px)/568 (px) = 2    640 (px) *1136 (px)/(px)  *568 (px) = 4

Api

For screen device pixels and device pixels, there is a corresponding JavaScript attribute than DPR

JavaScript has a property that Window.devicepixelratio,css also has Device-pixel-ratio (WebKit-based browser) and resolution (supported by all browsers) for media queries, They provide a ratio of the number of devices and the ideal viewport, known as device pixel ratios (devices pixel ratio abbreviated DPR)

    Screen.width Screen width    screen.height screen height    window.devicepixelratio device pixel ratio

[note] Each CSS declaration and almost all JavaScript attributes use CSS pixels, with the only exception being screen.width and Screen.height

The Device-pixel-ratio units of Window.devicepixelratio and media queries in JavaScript are DPPX, and the number of points per pixel. But in fact it is not allowed to add units behind the

if (Window.devicepixelratio >= 2) {}

@media all and (-webkit-min-device-pixel-ratio:2) {}

However, the resolution of media queries is required by the unit, but the problem is that although most browsers support DPPX, ie11-does not support it. Therefore, we have to use DPI units instead, because 1 inches corresponds to 96 pixels in the CSS, so 1dppx equals 96dpi

@media all and (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {}

Therefore, the ideal viewport of iphone5 is 568px*320px, the device pixel is 2 than DPR, the device pixel is 1136px*640px

The pixel and DPR of mobile web development