Useful bit of info that it took me a little while to find – there’s a new meta tag “viewport” that you have to know about.

The short story
Take this and play with it – note width can also be a pixel value, just replace with a number:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The long story

So if you had a nice, simple website with a heading and some text you would expect the mobile browser to find a sensible scaling for that wouldn’t you? Nope – the left is my artist’s rendition of what happens if you just have some HTML and you don’t specify any sizing information at all (and you haven’t got the above meta tag either).

OK, you think, it must have some sort of width that it expects the html element to be – let’s resize that (or body or something) so that we only have 320px worth of content. What happens then?

Well you get this – the mobile browser is basically wasting a lot of space.

This is because mobile browsers are assuming that your website needs somewhere between 800-1000px (depending on device) to display properly, it then renders the page according to that width and then does a pixel-by-pixel scale down so that all the page comes up on the screen. But tiny.

Now when you take out the CSS forcing body / html / top-level div width and replace with a meta viewport tag saying that your site has been designed for (say) 320pixels or to be fluid at small resolutions (device-width) it won’t need to scale it’s calculated website down so far, or at all. And you get the result you’re looking for lovingly rendered by myself to the left.

There’s a very detailed breakdown of what’s going on at quirksmode.