How can I prevent Jquery Mobile with Phonegap on an Android Samsung tablet from using the landscape height for the portrait height?

Question

This is an odd one and I do have a work around, though it seems there must be a more reasonable approach. For a mobile app that works well on iPhones, iPads and Android phones; when distributing it on a Samsung Galaxy Tablet (the only non-Apple tablet I have) running Android 3.2 it attempts to set the portrait height the dimensions of the landscape height and leaves whitespace below it.

If I allow both orientations and go from portrait to landscape back to portrait it corrects itself. If I click any link/button that transitions from one JQM page to another, it corrects itself. Though during transitions the whitespace at the bottom is noticeable, but then it does fill the full viewport.

My workaround is to assign an id to the div that contains the content of the home page (id="home_content") and add the following code to the beginning of onDeviceReady(): $("#home_content").height($(window).height());

Has anyone else seen this before? If so, I would appreciate any assistance in a better resolution.

Thanks, Sean

Answer 1

Sounds like a viewport issue. Do you have a 'viewport' meta tag? I found that I needed to mess with it for JQM.

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

More info https://developer.mozilla.org/en/Mobile/Viewport_meta_tag