CSS media queries for pixel density: -moz-min-device-pixel-ratio vs. min--moz-device-pixel-ratio

css, media-queries, mobile

Solution

The second one is correct.

This is from http://www.quirksmode.org/blog/archives/2012/07/vendor_prefixes.html

-webkit-min-device-pixel-ratio: 1.5
min--moz-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2

Problem

When using CSS media queries for device pixel density, I have seen both `-moz-min-device-pixel-ratio` and `min--moz-device-pixel-ratio`. For example: ``` @media only screen and (-moz-min-device-pixel-ratio: 1.5) { /* styles go here */ } ``` vs. ``` @media only screen and (min--moz-device-pixel-ratio: 1.5) { /* styles go here*/ } ``` Which is correct? Some tutorials/blogs that use the former: - http://menacingcloud.com/?c=highPixelDensityDisplays - http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/ Some tutorials/blogs that use the later, including mozilla.org: - http://www.slideshare.net/zomigi/css3-using-media-queries-to-improve-the-web-site-experience - https://developer.mozilla.org/en/CSS/Media_queries/

Original source