Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Retina screen media query
@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! */

madrobby commented Nov 28, 2012

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?


madrobby commented Nov 28, 2012

@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:

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


Your query doesn't work for Chrome on my Macbook Pro Retina 13.3".

 Chrome version: 36.0.1985.125
 Resolution: 204dpi

It works fine for Firefox and Safari. Thanks very much in advance!

Sorry, scrap that. It does work.

For some reason, however, 3/2 is giving me an error. It's fine when I replace it with 1.5. It might have to do with the fact I'm using gss.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment