[webkit-dev] Double-Resolution (Retina) Images - Re: -webkit-image-set

Edward O'Connor eoconnor at apple.com
Tue Apr 24 14:48:37 PDT 2012

Eric Seidel wrote:

> Assuming I'm understanding Kalle correctly, it seems this could
> already be accomplished with @media resolution?
> http://www.w3.org/TR/css3-mediaqueries/#resolution
> @media screen and (min-resolution: 264dpi) { … }
> Which according to:
> http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
> Would match both the new iPad and the iPhone 4.

As far as the resolution media query is concerned, the resolution of the
new iPad and the iPhone 4 (and anything else with a device-pixel-ratio
of 2) is exactly 192dpi.

This is because the CSS 'dpi' unit is defined to mean dots device pixels
per *CSS inch*, and CSS inches are hardcoded to be 96 CSS pixels.

This means that—without real physical units—the resolution media query
is always redundnant with device-pixel-ratio, which a) we already
implement, and b) is easier to explain to authors than explaining why
both the new iPad and the iPhone 4 are 192 "dpi".


More information about the webkit-dev mailing list