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, and it just made its way into WordPress core for version 3.5, thanks to Dave Martin and Andrew Nacin.