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

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

From: Florian Rivoal <florian@rivoal.net>
Date: Sun, 21 Oct 2012 17:17:16 +0200
To: Kenneth Rohde Christiansen <kenneth.christiansen@gmail.com>,Simon Sapin <simon.sapin@kozea.fr>
CC: "www-style@w3.org list" <www-style@w3.org>
Message-ID: <5bcb600d-d699-4fb4-9450-c592e69dbb39@email.android.com>


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.

You are correct if dpi is defined as physical pixels per physical inch, which is a reasonable thing to do when describing the characteristics of the hardware. This is not what the dpi unit in css means, tough. It refers to physical pixels per css inch, where a css inch is defined as 96 css pixels. The difference between physical inches and css inches is intentional.

According to this definition, the first iphone had 96 dpi, and the iphone 4 had 192dpi. This is, per definition, equivalent to 1dppx and 2dppx, respectively.

>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
>>
Received on Sunday, 21 October 2012 15:17:42 GMT

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