Monday, 25 June 2012

The PhoneGap Viewport size is too small on Android?

I spent quite some time today trying to figure out why, when I load an external HTML file into my PhoneGap (Apache Cordova) app, the viewport only filled part of the screen

Notice the big space at the bottom and the side border. I couldn't figure it out, so I started searching on Google:

Googled solution 1 - Set the viewport meta tag

Lots of the solutions I found involved setting the meta tag for the viewport, eg
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0/>

However, this seemed to have absolutely no effect whatsoever.  I tried many variations of this

Googled solution 2 - Set the page to use all the space

Other solutions involved setting CSS so that the page filled the screen, eg

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

This also had absolutely no effect.  I was getting confused by now

Googled solution 3 - Set Android properties

I found a couple of solutions that involved setting properties in the Android Activity, eg
                WindowManager.LayoutParams.FLAG_FULLSCREEN |

This had the nice effect of making my app fullscreen, but still with a small viewport.  By this point it was starting to wind me up and I had to eat something to calm myself down

My solution

After hacking around a lot (loading internal pages, using iframes etc), I decided that maybe it was because I was using a low version of the android target.  I was hoping to target pretty much every device by setting the target to 3 (Android 1.5) eg
<uses-sdk android:minSdkVersion="3" />

Bizarrely, changing this to 7 (Android 2.1) fixed the problem.  I'm guessing this is due to the low screen resolutions of the early devices.  But anyway, problem solved, and it only took me a few hours :@

Hopefully this will help someone in the future and save them a few hours of pain