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:
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.<meta name="viewport" content="width=device-width">
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:
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:<!--DISCLAIMER: I HAVE NOT ACTUALLY TESTED THIS.--> <meta name="viewport" content="initial-scale=1">
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.@viewport { zoom: 1.0; width: auto; }
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 :).