pixels, DPs, points (was Re: MATF Minutes 7 January 2016)

On 07/01/2016 17:19, Kim Patch wrote:

> http://lists.w3.org/Archives/Public/public-mobile-a11y-tf/2015Dec/
>
> Kathy: android says 48 DP and iOS says pixels –

iOS talks about "points" (see bottom of 
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1) 
where "points" is Apple's device-independent measurement (not to be 
confused with CSS pt). Unless I'm wildly mistaken, 1 Apple pt = 1 CSS px 
(in the case of web content, this assumes that the page is using the 
ideal viewport of width=device-width)

In the case of android, 1 DP is also = 1 CSS px (when width=device-width)

> Kathy: a pixel is the visual angle, DP is the same at some distance –
> common confusion point
> ... someone else has a conversion one DPI equals .75 pixels
>
> <Kathy> ldpi: 1 dp = 0.75 px mdpi: 1 dp = 1 px hdpi: 1 dp = 1.5 px
> xhdpi: 1 dp = 2 px xxhdpi: 1 dp = 3 px xxxhdpi: 1 dp = 4 px

Note that those px values are not correct when a page uses 
width=device-width (which sets the ideal viewport, and harmonises any 
difference in pixel density of the hardware - in short, it's the reason 
why say on iOS you don't have to care whether or not it's a retina or 
non-retina iPhone, as the width will always be reported as 320 CSS px 
regardless of physical pixel count/density)

> Jan: there's a way once the device has told you how far it assumes from
> the person's eyes to convert

This is not something that authors need to concern themselves with (and, 
particularly for web content, not something they can actually query). 
It's something that should be left up to the underlying device/OS. So, 
speaking specifically about web content, you set width=device-width in 
your viewport, the browser switches to using its ideal viewport, and you 
simply go about using the same CSS px values for your content and 
controls...it's the browser/OS' job to use a sensible ideal viewport 
that takes into consideration its screen size, presumed viewing 
distance, and to map that against its actual physical pixel count to 
work out the best mapping of CSS px to physical hardware pixels.

In short: define a size in CSS pixels, as that is inherently device and 
resolution independent when using the ideal viewport via width=device-width.

P
-- 
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Thursday, 7 January 2016 20:35:41 UTC