Dpr, ppi, dip, viewport concepts, dprviewport

Dpr, ppi, dip, viewport concepts, dprviewport

One ppi, dpr, dip, resolution, screen size, device physical pixel, device independent Pixel

Resolution:1920px * 1080px has 1920 pixels (Color Block) vertically on the device )...

Screen Size:5 inch (in) = 5*2.54 (cm) indicates the length of the diagonal line on the screen. The unit of inches is fixed for each device.

Pixel density ppi:Ppi and dpi refer to the number of pixels per inch in length on a device. ppi = number of pixels per diagonal line/size

Device pixel ratio dpr:The ratio of physical pixels to independent pixels on a device. dpr = device pixel/device independent pixel (css pixel)
Dpr = device pixel/CSS pixel = device pixel/device independent pixel ~ = PPI/160 = page zoom Ratio
Based on dpr, you can determine the number of device pixels represented by a css pixel:, and a css pixel represents four physical pixels.
A css pixel represents nine physical pixels

Device Pixel(Physical pixel): refers to the resolution size of the device.

Device Independent Pixel(Logical pixel) dip: refers to the css pixel ideal viewport (dip) device independent pixel === css pixel === logical Pixel

Two css units: px, em, rem, vw, and Ku:

Px:The relative unit is the number of physical pixels relative to the device based on dpr.
Em:The relative unit is based on the font size of the parent element, and the font size of the parent element is doubled.
Rem:The relative unit is based on the html font size in the root directory, and the font size of the html element is doubled.
Vw, Vl:The relative unit is based on the screen size, width, and height of each device. The relative screen size is 100 VWS, and Gbit/s is full screen.

Three viewport virtual Windows

1. layout viewport
The default virtual window is 980px.
Document.doc umentElement. clientWidth and-Height can be used to obtain the layout viewport size.
2. visual viewport
The visible window scales relative to the ideal viewport
Window. innerWidth/Height to obtain the visual viewport size
3. ideal viewport
The width of the ideal viewport is equal to the screen width of the mobile device (that is, the device logic pixel). It has nothing to do with the physical width of the device.
Ideal viewport width = logical pixel width of the screen

4. scaling factor:
Scaled relative to ideal viewport
The unit of each CSS pixel represents the length of the physical pixel, while the device pixel remains unchanged.
Zoom factor = ideal viewport width/visual viewport width