What is Device Pixel Ratio?
The term device pixel ratio
plays the crucial role in different languages’ styling. The definition of Device pixel ratio from MDN:
The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
My translation:
1 | Device pixel ratio = (Device physical pixel width) / (Width of a device in a program) |
For instance an iPhone12
:
Physical Width
:1170px
CSS width
:390px
Device Ratio Pixel
:1170px / 390px = 3
How to select a proper width image
1 | Proper image size = devicePixelRatio * width |
If you setup a image with style width:150px
, the phone will use 150 * 3 = 450 physical pixel
to render, so the proper width of the image should be 450