Retina screen media query

gistfile1.css

@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! */
}

Hi,

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!
Maddy

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.

Thanks,
Maddy