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