Mobile web development pixel and DPR, web pixel dpr

Mobile web development pixel and DPR, web pixel dpr
* Directory [1] Definition [2] classification [3] 3 P [4] scaling [5] DPR [6] before API

Pixels are used almost every day in web development. But what are pixels? Are there any differences between pixels on the mobile end and the desktop end? Does scaling affect pixels? What is the relationship between retina screens and pixels? These questions may be unclear. This article will introduce pixel-related knowledge

 

Definition

Pixels, also known as pixels, are the basic unit for image display. They are translated from the English "pixel". pix is a common abbreviation of the English word picture. with the English word "element", pixel is obtained, therefore, "pixels" indicate the meaning of "image elements", which are also called pel (picture element)

Pixels are the basis of web page layout. A pixel is the minimum area in which a computer can display a specific color. When the device size is the same but the pixels become more dense, the screen can show more detailed transition, the website looks more bright.

// Ppi indicates the number of pixels that can be displayed per inch on the screen, that is, the pixel density on the screen.

 

Category

In fact, there are two types of pixels: Device pixels and CSS pixels.

1. device independent pixels: 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 an abstract layer created for web developers and used in CSS and javascript.

// The pixels we set through CSS and javascript code are logical pixels width: 300px; font-size: 16px;

 

DP/PT/SP

Some people refer to the three concepts DP, PT, and SP as 3 P, which seem to be a new term. In fact, they are just three names of physical pixels.

The physical pixel in IOS is called PT (Point, display Point)

In Android, it is called DP/DiP (Device independent Pixel, Device-independent Pixel)

SP (Scale-independent pixel) is a scaling-independent pixel. It is physical pixel like DP and PT, but it is used to describe the font size.

We often say that the cell phone screen resolution unit refers to physical pixels. For example, the iPhone 5S resolution is 1136*640, which is actually 1136pt * 640pt.

 

Zoom

On the desktop side, one pixel of css usually corresponds to one physical pixel on the computer screen.

// A CSS pixel completely overwrites a device Pixel

　

On the mobile phone end, due to screen size restrictions, scaling is a regular operation.

// Device pixel (dark blue background), CSS pixel (translucent background)
// The picture on the left shows that when a user scales down, one device pixel overwrites multiple CSS pixels.
// The picture on the right shows that when you zoom in, a CSS pixel overwrites multiple device pixels.

Whether we zoom in or out, the CSS pixels (such as width: 300px) set by the element remain unchanged, the number of device pixels corresponding to a CSS pixel is determined based on the current scaling ratio.

 

DPR

DevicePixelRatio is the ratio of two pixels.

DPR = device pixel/CSS pixel (one side up)

In earlier mobile devices, there was no concept of DPR because device pixels and CSS pixels were always equal. With the development of technology, the pixel density of mobile devices is getting higher and higher. Apple launched the so-called retina screen since iPhone 4. The reason is the Retina screen because the screen's PPI (screen pixel density) is too high, and the human retina cannot tell the pixels on the screen. The resolution of iPhone 4 is doubled, but the screen size remains unchanged. This means that the pixels on the screen of the same size are doubled, so DPR = 2

Take the iPhone 5 as an example. The device resolution of the iPhone 5 is 640dp * 1136dp, And the CSS is 320px * 568px. The DPI of iPhone 5 is 2.

    640(dp) / 320(px)  = 2    1136(dp) / 568(px) = 2    640(dp)*1136(dp) /  320(px)*568(px) = 4

API

For screen device pixels and device pixels, DPR has corresponding javascript attributes.

Screen. width screen. height screen height window. devicePixelRatio device pixel Ratio

[Note] As mentioned earlier, the pixels set through CSS and javascript code are logical pixels (CSS pixels), so the unit of the obtained screen width and height is pixel.

Therefore, the iPhone 5 screen size is 568px * 320px, the device pixel ratio is 2 to DPR, and the resolution is 1136pt * 640pt