There now is an abundance of devices with some sort of high-density display, from MacBook Pros to iPads, from Windows Surface tablets to all kinds of mobile phones.

All of these devices have one thing in common: In web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel.

In terms of CSS, to specifically target this group of devices, unfortunately there’s no easy way to say “apply this set of rules to all devices where physical pixels are not equal to CSS pixels”. Instead you have to fight through a whole forest of media query rules.

Here’s the set that I use on my sites:

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

This is tested on all browsers I could get ahold of, on real Retina and non-retina displays, and should be future-proof as well. We use this specific query in production on Freckle Time Tracking (Sorry, marketing site is not retinafied yet!)—and it works well!

Specifically, it supports Safari, Chrome, Firefox (Note: Firefox doesn’t really support Retina screens at all yet) and Internet Explorer 9 and 10 (IE has great Retina support, actually!).*

I’d love to hear corrections and suggestions about this, please use the gist.

*Before you ask, I suppose it supports Opera as well, but I don’t test on Opera. It’s a long story.

Want to make your websites all ready for the smorgasbord of screen resolutions and densities? Fear not—my latest ebook Retinafy your web sites & apps now will guide you through the jungle! Learn how to deal with all this in 30 minutes reading, and have your site all shiny by tomorrow!