Phonegap and Android: Rotating screen changes page size

Question

We are designing a banking app. I am working on the design. We are using only html and css and a very tiny bit of javascript (all client side, anyway - server side obviously is different).

The app loads in portrait orientation. When rotated to landscape, all ratios are kept. However, on rotation back to portrait, everything get's resized to a very tiny size. I equate it to when you zoom in on a web page, and on reload the page goes back to it's normal size.

All the styles are kept - almost everything seems fine, except everything turns out really tiny, like an entire 2000px web page has been loaded to fit in the screen.

(Need ten rep points to post the images... sorry)

What is causing this, and how can I fix it?

Answer 1

Try adding this to the "head", if you haven't already:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=medium-dpi, user-scalable=no" />