Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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
Owner

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

@sergiolopes

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)

@krisbulman

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

@madrobby
Owner

@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).

@curtisj44

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

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

@Maddy1984

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.