public
Last active

A CSS media query that captures almost all high DPI aware devices.

  • Download Gist
high-dpi-media.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
/* - Android tvdpi devices, including Google Nexus 7 */
/* - Chrome running on high DPI Macs and PCs */
/* - Opera running on high DPI Macs, PCs and mobile devices */
/* */
/* Please note that that this code assumes you'll swap a */
/* 2× version of your images. If you'd like to supply */
/* finer increments, other thresholds might be appropriate. */
/* */
/* A test for CSS pixel densites can be found here: */
/* http://bjango.com/articles/min-device-pixel-ratio/ */
/* */
/* @marcedwards from @bjango */
/* */
/* ---------------------------------------------------------- */
 
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi)
{
/* Your code to swap higher DPI images */
}

Extra curly brace at the end?

The extra curly brace and dangling comma cause this to fail, so here's my fork

Oh yep, you're both right. Fixed.

your media query is brilliant. I've started using it for all my projects and it works perfectly.

FYI - it also works with Low DPI Windows & OS X PCs with Firefox zoomed in (tested today with FF 17 on Windows 8 and OS X 10.8.2)

@coliff Thanks! I've updated the comment to include your info.

Smart idea! Will try this out on my next project.

Awesome media query! What about the new(er) dppx unit? Worth adding yet?

@media (min-resolution: 1.3dppx) {}

I have try this for the firefox on mac retina;

min--moz-device-pixel-ratio:1.5

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.