Friday 13 January 2012

viewport meta tag: An alternative to "width=device-width"

Update: the viewport guru ppk discovered at least one substantial difference in practice, between the popular "width=device-width" and my ideological preference for "initial-scale=1".  It is described concisely in presentation slides, or you can read the original blog posts.

The viewport meta tag is used in modern "mobile" browsers. (iOS/Safari, Android/Chrome, Mobile Firefox, Opera). It lets developers say "this is a properly-designed website, not desktop-specific crud". Without it, the mobile browsers assume your website is designed with an unspecified min-width, somewhere around 960 pixels.

Many articles about mobile viewports recommend the following approach:
<meta name="viewport" content="width=device-width">
But I have a philosophical objection. I don't like device-width. Hypothetically, if I connect a N900 running Mobile Firefox to a big screen, I won't be using full-screen windows.

Looking at the original Apple documentation, the W3C draft (based on the initial iOS implementation), and the Android and Opera documentation, there's another way:
<!--DISCLAIMER: I HAVE NOT ACTUALLY TESTED THIS.-->
<meta name="viewport" content="initial-scale=1">
This avoids mentioning device-width. The documentation for the mobile browsers say that this is effectively the same as the first approach. But the W3 draft says it's equivalent to this CSS version:
@viewport {
    zoom: 1.0;
    width: auto;
}
And "width: auto" is not defined in terms of device-width. If you can resize the browser window, the content should respond as you'd expect.

In practice, if it's a major problem I'm sure browsers will invent another hack. The current answer is "desktop browsers don't implement @viewport". In the future it might be changed, e.g. to "browsers only apply @viewport if their window is maximized, filling the screen". But it's interesting to anticipate such problems :).

No comments: