Re: [css3-mediaqueries] Is 'resolution' in terms of device pixels or CSS pixels?

Brad Kemper wrote:
> It does make sense to keep it if you think about something like an 
> iPhone, that has high resolution and a width of 480 device pixels.
 > On something like that, because the resolution is so high, I'm going to
 > want to use fairly large font sizes, so that you don't have to squint to
 > read it. But on something else, like a 72 dpi monitor, I might want to
 > use smaller font sizes instead, since the pixels will be larger, and
 > therefore the text will appear larger.

Here's an interesting question.  What is the device-to-css pixel ratio on an iPhone?

It's 163 pixels per inch per the tech specs.   Typical viewing distance, I would 
guess, is about 12-14 inches.  Let's say 12.  Then each pixel subtends an angle 
of .0293 degrees.  That's about 1.4 reference pixels.

For comparison, a 72-dpi monitor has a device pixel subtending an angle of 0.284 
degrees.  This gives 1.33 reference pixels.  That's actually very close to the 
iPhone.

If you treat the iPhone based purely on its DPI, as a 163-dpi monitor, you'll 
actually get worse results than if you specify your stuff in CSS px and let the 
device manufacturer, who knows something about the viewing distance, handle the 
conversion to device pixels...  In particular, if you treat it as a 163-dpi 
monitor, you'll actually make the fonts twice as big as they really need to be, 
given your approach.

Note in all this that the viewing distance is key.  No one holds an iPhone 2.5 
feet away while using it.  People do that with monitors all the time..

-Boris

Received on Monday, 7 April 2008 17:23:06 UTC