Targeting Hi-Density and Hi-Res Screens
Media queries to target different pixel densities
/* CSS for Retina & XHDPI Android screens (these should get retina assets) */
@media screen and (-webkit-device-pixel-ratio: 2) {
}
/* CSS for HDPI Android screens */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
}
/* CSS for MDPI screens (this is generally default so unlikely you'll use this often) */
@media screen and (-webkit-device-pixel-ratio: 1) {
}
/* CSS for LDPI screens */
@media screen and (-webkit-device-pixel-ratio: 0.75) {
}
To target specific screen densities in JavaScript
if (window.devicePixelRatio == 1.5) {
console.log("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
console.log("This is a low-density screen");
}
Written by Jesse Weed
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Javascript
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#