Uncategorized

Making Sense of HiDPI 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: 120dpi) {
	  /* 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.

Standard

5 thoughts on “Making Sense of HiDPI Media Queries

  1. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s