How can I make the Android browser render my document at the screen's size?

Question

I'm working on a site that's supposed to scale fluently down to low resolutions, so that it would work just as well on a phone. This works well in Firefox and Chrome when I just make the window small, but when I try it out on an actual Android phone (Nexus One running Android 2.2), it renders it super-huge! (Using JS's window.innerWidth and window.innerHeight properties, it seems the viewport resolution it reports is 800x1271!)

Is there a way to render the page at actual-size in the browser window so I can have my full design show up on the phone? User-agent sniffing is allowed, JS is allowed but discouraged.

Answer 1

Resolved on my own. The solution is to add the following code to the header:

<meta name="viewport" content="width = device-width">

Answer 2

Thanks for answering your own problem – you got me to my solution, too.

Just some extra info for anyone else with a similar problem, I got the following results using jQuery $(window).width() / $(window).height() on a Nexus One running Android 2.2.

No <meta name="viewport">

– portrait 800 x 1130, landscape 800 x 358

With <meta name="viewport" content="width=device-width">

– portrait 320 x 452, landscape 533 x 239

With <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

– portrait 480 x 678, landscape 800 x 358 – the real pixel dimensions!

I've not been able to test it on an iPhone: if anyone wants to try, the test is here .