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

Kenneth Rohde Christiansen kenneth.christiansen at gmail.com
Wed Apr 25 03:22:38 PDT 2012

Hi there,

On Tue, Apr 24, 2012 at 11:48 PM, Edward O'Connor <eoconnor at apple.com> wrote:
> 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".

So the original iPhone has a dpi of 163, but it reported a CSS dpi of
96? meaning that in screen width it had around 3,3 CSS inches where as
the physical inches are more close to 1.96.

Why is this? Because the original iPhone reported an unchanged dpi of
96 even though it was in reality 163 and now everyone are depending on


Kenneth Rohde Christiansen
Senior Engineer
Nokia Mobile Phones, Browser / WebKit team
Phone  +45 4093 0598 / E-mail kenneth at webkit.org

http://codeposts.blogspot.com ﹆﹆﹆

More information about the webkit-dev mailing list