The pixel and DPR of mobile web development

xCatalog [1] definition [2] classification [3]3p[4] scaling [5]DPR[6]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;

Dp/pt/sp

Some people will be DP, PT, SP these three concepts referred to as 3P, seems to be a term, in fact, is only 3 of the physical pixels of the name

Physical pixels in iOS are called PT (point, display points)

Android is called DP/DIP (device independent Pixel, devices independent pixels)

The SP (scale-independent pixel) is a scale-independent pixel, which is a physical pixel just like DP and PT, but is used to describe the size of the font

We often say that the cell phone screen resolution of the pixel Unit refers to the physical pixels, such as iphone5s resolution is 1136*640, is actually 1136pt*640pt

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 a two pixel ratio

DPR = device pixel/css pixel (in One Direction)

In previous mobile devices, there was no concept of DPR because device pixels and CSS pixels were always equal. 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

In Iphone5, for example, the IPHONE5 device resolution 640DP*1136DP, while the CSS is represented as 320px*568px. So Iphone5 's dpi=2

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

Api

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

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

[note] As described earlier, the pixels set by CSS and JavaScript code are logical pixels (css pixels), so the width and height of the screen can be obtained in units of PX

Therefore, the iphone5 screen size is 568px*320px, the device pixel is 2 than DPR, the resolution is 1136PT*640PT

The pixel and DPR of mobile web development