Re: Proposal: Form factor media queries

On Thu, Dec 8, 2011 at 10:56 PM, Brian <irishb@gmail.com> wrote:
> With all of the attention being given to responsive design approaches, I
> could not help but wonder what will happen in as little as a few years.
> Smartphones will likely have resolutions that will either rival or supersede
> present-day laptop resolutions, so our approach of detecting screen
> resolution and/or pixel density will be useless as a means to detect form
> factor.

Here's what works already: Put <meta name="viewport"
content="width=device-width, initial-scale=1"> in each HTML file. Then
write em-valued media queries for max-width.

This relies on browser vendors doing a reasonable job with setting the
base font size for <meta name="viewport" content="width=device-width,
initial-scale=1">. It turns out that the width in em varies quite a
bit on the same Android device in Opera Mini vs. Opera Mobile vs.
Firefox & the stock browser. However, so far the browsers I have
tested (Mobile Safari on iOS 4.x something, Opera Mini&Mobile on S60,
Firefox, Opera Mini&Mobile and stock on Android Galaxy Tab 10.1 and
Galaxy Nexus) have had reasonable enough defaults that this approach
works.

What this doesn't address is differently sized click targets for touch
and non-touch devices, but this approach goes a long way and isn't
tied to the pixel density of the device from the author's side.

I think there might be merit in adding a way for querying touch vs.
non-touch screen, but querying the form factor is a solved problem.

-- 
Henri Sivonen
hsivonen@iki.fi
http://hsivonen.iki.fi/

Received on Tuesday, 20 December 2011 12:42:59 UTC