Last Updated: February 25, 2016
·
488
· jesseweed

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");
}