Making Sense of HiDPI Media Queries

Posted byMatt Miklic 5 Comments on Making Sense of HiDPI Media Queries

Update 2, July 2015: Windows 10 has just been released, along with the new Microsoft Edge browser. It replaces Internet Explorer, which was the last browser that supported min-resolution, but not the dppx unit. That means that if you don’t care about supporting IE11, you can switch to the dppx unit in your media queries.

Update, November 2013: Opera 15 was released in July, and the current stable version is 17. With its new rendering engine Opera’s media query support now mirrors that of Chrome on every platform. As such, I’ve retired -o-min-device-pixel-ratio from the suggested syntax below.

There are a number of methods of deploying high resolution assets to HiDPI (or “Retina”) aware browsers. Some are overly simplistic, and don’t cover every browser with HiDPI support. Others are overly complex. In the interest of laziness, I sought to find the smallest number of media queries that would cover everyone.

My test is pretty straightforward — five paragraphs, five media queries. A simple CSS rule turns the text blue if the media query works.

I’ve detailed the results here. For browsers that support multiple queries, I’ve highlighted the most common one. I’ve tested every current version of default OS browsers as well as Chrome, Firefox, and Opera. Beta/alpha versions of those with no support in the current version are also included.

We combine the two rules that cover every browser, along with print to enable the high resolution assets for all browsers, regardless of display pixel density, when printing.

@media print,
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 1.25dppx) {
	  /* Styles go here */
	}

This is the technique we’re using now on WordPress.com, and it just made its way into WordPress core for version 3.5, thanks to Dave Martin and Andrew Nacin.

Published by Matt Miklic

Designer, and other useful things.

5 replies on “Making Sense of HiDPI Media Queries”

  2. Hey Matt, very interesting. I like how you displayed results, very clean. I recently was playing around with retina/high resolution media queries and have a few questions for you.

    I’m curious which Windows 8 phone you used when you saw that it supported 120dpi? I tested on the Nokia 920 and the HTC 8x and both reported 96dpi.

    I don’t think you need the Opera prefixed min-device-pixel-ratio. In my testing I’ve found that resolution media queries work in every opera browser -o-min-device-pixel-ratio media queries work. Curious if maybe I missed something. You can check out my research here: http://bit.ly/St7p8j

    Like

    2. Also, re: Windows Phone 8; I don’t have a hardware device to test with yet, so I ran that test using the emulator in the WP8 SDK. I imagine each piece of hardware will be its own case, but I was able to confirm that IE10 in WP8 supports it.

      Like

    3. Aha! The plot thickens. Opera 12.10 does indeed support resolution, but it reports the wrong value. On my MacBook Pro with Retina Display, Opera only responds to min-resolution: 96dpi (or 1dppx), while it correctly responds to pixel ratios up to 2 with -o-min-device-pixel-ratio. So it looks like support for resolution is coming soon but still too buggy to rely on.

      Your test page viewed in Opera 12.10: http://cl.ly/image/470v1U1S233o
      compared to Firefox Aurora: http://cl.ly/image/2i241T393o1a

      Like

Comments are closed.