4

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.

MiffTheFox
  • 21,302
  • 14
  • 69
  • 94

2 Answers2

4

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

<meta name="viewport" content="width = device-width">
MiffTheFox
  • 21,302
  • 14
  • 69
  • 94
4

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.

ChrisV
  • 8,748
  • 3
  • 48
  • 38
  • 1
    Hmmm, still not quite what I was looking for – the reported window dimensions now change as I zoom. Could be effective, but not what I was expecting... – ChrisV Nov 02 '10 at 12:46