DPI (DPR) stands for dots per inch which technically means printer Dots per inch.
This parameter actually quantifies the physical resolution and display sharpness of the screen, such as the iphone's DPR 2, which is higher than the average phone.
The same images have a very different effect on different phones, especially for Apple devices, because their DPR are relatively high, so they generally have to
Application of high resolution image display can be guaranteed.
Common, you can use media query to apply a different style
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {/ * retina-specific stuff here */}
Here are the parameter values for common phone models:
- -webkit-min-device-pixel-ratio is 1.0
- All non-retina Mac
- All non-retina iOS devices
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
- -webkit-min-device-pixel-ratio is 1.3
- Google Nexus 7
- -webkit-min-device-pixel-ratio is 1.5
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
- -webkit-min-device-pixel-ratio is 2.0
- IPhone 4
- IPhone 4S
- IPhone 5
- IPad (3rd generation)
- IPad 4
- All Retina displays for Mac
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- HTC One X
What do you mean,-webkit-min-device-pixel-ratio:2?