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


  1. Hi.
    I'm facing the same problem. Infact in my case minSdkVersion is 10.

    Tried all the solutions listed by you. But no success so far.
    Any other way out?

  2. Those were everything I could think of or find at the time. Have you managed to resolve it? I'd like to add the solution to the post if you have

  3. same problem. this is very frustrating.

  4. You manage to sort it? It has to be to do with the viewport size

  5. It may helps your problem :
    add target-densitydpi=medium-dpi in your meta

  6. GOD BLESS YOU!!!!
    The only working solution out there!!!

    For the others that still have problems, try adding:
    or similar.... and maybe no targetSDKVersion, just min.

  7. For future reference, you have to actually say what file you are editing instead of "I made an edit." And edit to what?