resolution and device-pixel-ratio (was Re: device-pixel-ratio)

Authors need to be able detect when (and how) CSS pixels differ from
device pixels. The most straightforward way to give them this ability is
to directly expose this in a media query. This is what WebKit does with
its  -webkit-device-pixel-ratio media query.

It's also—separately—useful for authors to be able to distinguish
between displays of different resolution. Consider the iPhone 4 and the
new iPad. Both devices' CSS-to-device pixel ratio is 2. But the
resolution of these displays is quite different (326dpi and 264dpi,
respectively). Authors should be able to distinguish these two displays
in a media query.

Yes, these screens have different pixel dimensions, so authors can use a
width or height media query to distinguish between them. But I think
it's best if authors can express their *intent* in the media query they
use. Using a width media query expresses the author's intent to style
things differently on wider or narrower displays, whereas using a
resolution media query should express an intent to style things
differently on displays that have different resolutions.

It's really, profoundly weird to me that the media query named
"resolution" doesn't do this, but is instead a strangely-named and
strangely-valued synonym of device-pixel-ratio. It's weird that the
resolution media query's meaning has essentially nothing to do with the
plain English meaning of the word "resolution."

Not only is this weird, authors and developers in the wild don't and
won't understand this. For instance, consider this email[1] to
webkit-dev from Eric Seidel, a core WebKit developer. He—completely
reasonably—assumes that 

            @media screen and (min-resolution: 264dpi) { … }

would match on both the new iPad and the iPhone 4 & 4s. But it doesn't!
As far as the resolution media query is concerned, both of these
displays have a resolution of 192dpi. Let me quote what I said in the
initial email on this thread:

>> It makes me really sad that Web authors can't simply go to
>> Wikipedia's "List of displays by pixel density" page[2], cut and
>> paste, and end up with a stylesheet that does what they mean. We
>> need to fix this.

fantasai replied:
> I don't understand how [device-pixel-ratio: 2] is any better than
> resolution: 2ddpx;

As currently defined, these both do the same thing. I agree that we need
a media query to do this—to detect the relationship of CSS pixels and
device pixels—but I think naming such a media query "resolution" is a
mistake. Also, as Maciej pointed out, ddpx is much less understandable
to people unfamiliar with it.


Ted

1. https://lists.webkit.org/pipermail/webkit-dev/2012-April/020433.html
2. http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Received on Thursday, 10 May 2012 10:32:22 UTC