public
Last active

Retina screen media query

  • Download Gist
gistfile1.css
CSS
1 2 3 4 5 6 7 8 9 10
@media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
 
/* Retina rules! */
 
}

Don't be shy—comments are very welcome, especially if you found a device or browser that's quirky and needs extra help!

What about tvdpi Android devices like Nexus 7? They have a pixel ratio ~1.33. Do you think we need to address them specifically? Or the normal @1x file would be fine for them? And then we should use @2x only to pixel ratio >= 1.5? (Nice work and great book btw)

I tested the following slim one on every device on browserstack with 2x images and had good results.. (including opera). How does this one differ.. more future proof?

http://core.trac.wordpress.org/changeset/22629

@sergiolopes Good question. Because of all the variations, I usually recommend to just serve the big image to everything, but some browsers (older IE mostly) don't support background-size. I'd use high-res images for the 1.33 ratio as well, and I'll see to test this in adapt the query (I do have a Nexus 7 lying around somewhere).

What do you think of the simplified version found here: http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/?

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
    /* Retina rules! */
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.