W3C home > Mailing lists > Public > www-style@w3.org > October 2012

Re: [css3-mediaqueries] (min-resolution: 0dpi) is false in several browsers.

From: Kenneth Rohde Christiansen <kenneth.christiansen@gmail.com>
Date: Sun, 21 Oct 2012 16:44:33 +0200
Message-ID: <CAEC208sBM4x9YS2MwoQMCx3AJnrKW6jCpD25nKc51hLUoXQ4RA@mail.gmail.com>
To: Simon Sapin <simon.sapin@kozea.fr>
Cc: "www-style@w3.org list" <www-style@w3.org>
Another interesting comment explaining why 160 dpi per css unit makes
sense for phones.

https://bugs.webkit.org/show_bug.cgi?id=88114#c0 :

"This works on phones, but is incorrect on laptops/desktops. The
definition of a CSS pixel
(http://www.w3.org/TR/css3-values/#reference-pixel) requires a pixel
density of 96dpi on devices used at arms length (the reason that 160
works well on phones is because they're held at about 60% of an arm
length). It's also common to discretize deviceScaleFactor to the
nearest 0.25 or so."

Kenneth

On Sun, Oct 21, 2012 at 4:36 PM, Kenneth Rohde Christiansen
<kenneth.christiansen@gmail.com> wrote:
> The first iPhone (and many later phones) shipped with a DPI of 160,
> which is what most mobile web apps have been optimized for.
>
> The iPhone 4, shipped with a DPI of 320 (retina display) and a
> device-pixel-ratio == 2.0, meaning that one CSS unit is defined at 160
> DPI still.
>
> A bit of background:
>
> http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
> http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
> http://www.rictus.com/muchado/wp-content/uploads/2011/04/multiscreen-dev-with-flex-360flex-2011.pptx.pdf
> http://web.archiveorange.com/archive/v/OOYmTvfzzo75fCpH6kHs
>
> Cheers
> Kenneth
>
> On Sun, Oct 21, 2012 at 2:25 PM, Simon Sapin <simon.sapin@kozea.fr> wrote:
>> Le 21/10/2012 14:06, Kenneth Rohde Christiansen a écrit :
>>
>>> Then that is very different from the device-pixel-ratio it is supposed
>>> to replace, as device-pixel-ratio: 1 on iOS etc corresponds to a DPI
>>> of 160, and 2 to a DPI of the double.
>>
>>
>> Where is this 160 number coming from? By "a DPI of 160", do you mean device
>> pixels per physical inch on a particular device?
>>
>> The CSS dpi unit is not the same, it is in device pixels per CSS inch. A CSS
>> inch is always 96 CSS pixels.
>>
>>
>> About device-pixel-ratio, what is it’s exact definition? I couldn’t find it.
>> Apparently it ways supposed to be documented in [1] but according to
>> archive.org is never was.
>>
>> The best hint I found is in a Mozilla bug[2]:
>>
>>> It looks like Webkit's 'ratio' is the number of device pixels per CSS
>>> pixel.
>>
>>
>>
>> There is also a CSSWG blog post[3] suggesting that eg.
>> (-webkit-device-pixel-ratio: 2) is exactly the same as
>> (resolution: 192dpi)
>>
>>
>> [1] http://webkit.org/specs/MediaQueriesExtensions.html
>> [2] https://bugzilla.mozilla.org/show_bug.cgi?id=474356#c6
>> [3]
>> http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
>>
>>
>> --
>> Simon Sapin
>>
>
>
>
> --
> Kenneth Rohde Christiansen
> Senior Engineer, WebKit, Qt, EFL
> Phone  +45 4093 0598 / E-mail kenneth at webkit.org
>
> ﹆﹆﹆



-- 
Kenneth Rohde Christiansen
Senior Engineer, WebKit, Qt, EFL
Phone  +45 4093 0598 / E-mail kenneth at webkit.org

﹆﹆﹆
Received on Sunday, 21 October 2012 14:45:20 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT