The pixel and DPR of mobile web development

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 not be clear. 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.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/740839/201605/740839-20160515092318852-818619954. JPG "style=" border:none;width:650px;margin-top:20px;margin-bottom:20px; "/>

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

CSS pixels are used for every CSS declaration and almost all JavaScript properties, so you never actually use device pixels, the only exception being screen.width/height

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

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/740839/201605/740839-20160515102843711-1407435940. GIF "style=" border:none;margin-top:20px;margin-bottom:20px; "/>

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

//device pixels (dark blue background), CSS pixels (semi-transparent background)
//Zoutu means that when the user zooms out, a device pixel overlays multiple CSS pixels
//The right image indicates that a CSS pixel overrides multiple device pixels when the user zooms in:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/740839/201605/ 740839-20160515103300602-1749012296.gif "style=" BORDER:NONE;MARGIN-TOP:20PX;MARGIN-BOTTOM:20PX;WIDTH:343PX;

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/740839/201605/ 740839-20160515103307508-1159608111.gif "style=" BORDER:NONE;MARGIN-TOP:20PX;MARGIN-BOTTOM:20PX;WIDTH:343PX;

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

The ratio of the device pixel to the CSS pixel is the device pixel ratio DPR (devicepixelratio) is the default scale of 100%

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

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

In fact, the CSS pixel at this point corresponds to the ideal viewport to be mentioned later, and its corresponding JavaScript attribute is Screen.width/screen.height

For device pixels, there is a corresponding JavaScript attribute than DPR Window.devicepixelratio

Take iphone5 as an example, the iphone5 CSS Pixel is 320PX*568PX,DPR is 2, so its device pixel is 640px*1136px

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

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/740839/201605/740839-20160522182155669-1272722807. GIF "style=" border:none;width:650px;margin-top:20px;margin-bottom:20px; "/>

The pixel and DPR of mobile web development