What is Device Pixel Ratio?
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.
Device pixel ratio = (Device physical pixel width) / (Width of a device in a program)
For instance an
Device Ratio Pixel:
1170px / 390px = 3
How to select a proper width image
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