Some concepts about pixel resolution and viewport

Device pixels:

The physical pixels on the screen.

Resolution:
1. Screen resolution: Number of pixels on the screen (horizontal * vertical)
2. Image resolution: The number of pixels in the image

CSS Pixels:
Logical pixels, used in CSS code
Logical pixel 320x568px--> device pixel 640x1136px
(1*1css pixels ==> 2*2 of physical pixels: device pixel ratio)

Device pixel ratio:
DPR = number of physical pixels/number of logical pixels
When dpr=2, 1 css pixels are composed of 4 physical pixel points.
Window.devicepixelratio

Pixel density:
Display Density Dip/ppi
Physical pixel/physical size
MATH.SQRT (750*750 + 1334*1334)/4.7 = 326ppi

# #设备独立像素:
Android is used to fit a model.
Dip: Reference pixel density 160.

Viewport:
Layout viewport: Much larger than the screen width, narrowing the site display.
Visual viewport: screen physical pixel size.
Ideal viewport: META-WIDHT

Some concepts about pixel resolution and viewport