Last Updated: February 25, 2016
·
678
· 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");
}

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside