If you’re doing “retina” media queries on your site and they look something like this:

@media (-webkit-min-device-pixel-ratio: 1.5) {

you might not be coding with standards. And maybe you thought you’d add some more versions, just to be safe:

@media (-webkit-min-device-pixel-ratio: 1.5),
       (-moz-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5) {

The bad news for you is that neither -moz-min-device-pixel-ratio nor min-device-pixel-ratio have been implemented in any browser — and neither will they ever be. Because it’s not a standard; WebKit came up with it on their own.

Okay, so actually, it’s kind of a trick question, because Mozilla actually did go ahead and implement it — but they named it min‐‐moz-device-pixel-ratio. Either way, you didn’t do your homework.

Back to standards. The media feature you’re looking for is resolution. Basically, it sounds like WebKit didn’t like the original unit options for resolution (dpi or dpcm), so they made their own thing. In the meanwhile, the W3C created a new unit (dppx), and everyone is happy now. You can read more about it from the W3C here.

So, with a little help from MDN, a good high-DPI media query should look something like this (you can add min‐‐moz-device-pixel-ratio if you want to support Firefox 15 and older):

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx)

Cool. So don’t forget to be careful when using vendor prefixes or unprefixing them. And for crying out loud, use the standards!

By the way: I recently learned that you can accurately simulate high-DPI screens in Firefox! Just go to about:config and change the value of layout.css.devPixelsPerPx.