{"id":1199,"date":"2013-11-11T22:28:39","date_gmt":"2013-11-12T04:28:39","guid":{"rendered":"http:\/\/cbateman.com\/blog\/?p=1199"},"modified":"2014-10-09T22:34:32","modified_gmt":"2014-10-10T03:34:32","slug":"high-dpi-media-queries-and-standards","status":"publish","type":"post","link":"https:\/\/cbateman.com\/blog\/high-dpi-media-queries-and-standards\/","title":{"rendered":"High-DPI Media Queries and Standards"},"content":{"rendered":"<p>If you&#8217;re doing &#8220;retina&#8221; media queries on your site and they look something like this:<\/p>\r\n\r\n<pre class=\"pre\">@media (-webkit-min-device-pixel-ratio: 1.5) {<\/pre>\r\n\r\n<p>you might not be coding with standards. And maybe you thought you&#8217;d add some more versions, just to be safe:<\/p>\r\n\r\n<pre class=\"pre\">@media (-webkit-min-device-pixel-ratio: 1.5),\r\n       (-moz-min-device-pixel-ratio: 1.5),\r\n       (min-device-pixel-ratio: 1.5) {<\/pre>\r\n\r\n<p>The bad news for you is that neither <i>-moz-min-device-pixel-ratio<\/i> nor <i>min-device-pixel-ratio<\/i> have been implemented in any browser &mdash; and neither will they ever be. Because it&#8217;s not a standard; WebKit came up with it on their own.<\/p>\r\n\r\n<p>Okay, so actually, it&#8217;s kind of a trick question, because Mozilla actually did go ahead and implement it &mdash; but they named it <i>min&#8208;&#8208;moz-device-pixel-ratio<\/i>. Either way, you didn&#8217;t do your homework.<\/p>\r\n\r\n<p>Back to standards. The media feature you&#8217;re looking for is <a href=\"http:\/\/www.w3.org\/TR\/css3-mediaqueries\/#resolution\">resolution<\/a>. Basically, it sounds like WebKit didn&#8217;t like the original unit options for  <i>resolution<\/i> (<i>dpi<\/i> or <i>dpcm<\/i>), so they made their own thing. In the meanwhile, the W3C created a new unit (<i>dppx<\/i>), and everyone is happy now. You can read more about it from the W3C <a href=\"http:\/\/www.w3.org\/blog\/CSS\/2012\/06\/14\/unprefix-webkit-device-pixel-ratio\/\">here<\/a>.<\/p>\r\n\r\n<p>So, with a little <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/CSS\/Media_queries#-moz-device-pixel-ratio\">help from MDN<\/a>, a good high-DPI media query should look something like this (you can add <i>min&#8208;&#8208;moz-device-pixel-ratio<\/i> if you want to support Firefox 15 and older):<\/p>\r\n\r\n<pre class=\"pre\">@media (-webkit-min-device-pixel-ratio: 2),\r\n       (min-resolution: 192dpi),\r\n       (min-resolution: 2dppx)<\/pre>\r\n\r\n<p>Cool. So don&#8217;t forget to <a href=\"\/blog\/vendor-prefixes-youre-doing-it-wrong\/\">be careful<\/a> when using vendor prefixes or unprefixing them. And for crying out loud, use the standards!<\/p>\r\n\r\n<p><strong>By the way: <\/strong> I recently learned that you can accurately simulate high-DPI screens in Firefox! Just go to <i>about:config<\/i> and change the value of <i>layout.css.devPixelsPerPx<\/i>.","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re doing &#8220;retina&#8221; 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&#8217;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&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1199","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1199"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=1199"}],"version-history":[{"count":26,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1199\/revisions"}],"predecessor-version":[{"id":1371,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1199\/revisions\/1371"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=1199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=1199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=1199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}