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
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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#