Mobile web development pixel and DPR-little match Blue ideal

Mobile web development pixel and DPR-little match Blue ideal

* Directory [1] Definition [2] classification [3] scaling [4] DPR [5] API

Previous

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;

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

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

DPR = device pixel/ideal view

Generally, the ideal port is the device width and height.

In earlier mobile devices, there was no concept of DPR. 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 ideal viewport of the iPhone 5 is 640px * 1136px, and the device pixel is 320px * 568px. The DPI of iPhone 5 is 2.

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

API

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

Javascript has a property of window. devicePixelRatio and CSS also provide device-pixel-ratio (webkit-based browser) and resolution (supported by all browsers) media queries. They provide the ratio of the number of pixels of the device to the ideal view, device pixel ratio (DPR)

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

[Note] CSS pixels are used for every CSS declaration and almost all javascript attributes. The only exception is screen. width and screen. height.

In javascript, the unit of window. devicePixelRatio and device-pixel-ratio of the media query is dppx, and the number of points in each pixel. However, it is not allowed to add units later.

if(window.devicePixelRatio >= 2){}

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

However, resolution media queries require units, but the problem is that most browsers support dppx, but IE11-does not. Therefore, we must use dpi units instead. Because 1 inch corresponds to 96 pixels in CSS, 1dppx equals 96 dpi.

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

Therefore, the ideal screen for iPhone 5 is 568px * 320px, the device pixel ratio is 2, and the device pixel ratio is 1136px * 640px.