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
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN |
                WindowManager.LayoutParams.FLAG_FORCE_NOT_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


7 comments:

  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?

    ReplyDelete
  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

    ReplyDelete
  3. same problem. this is very frustrating.

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

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

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

    For the others that still have problems, try adding:
    target-densitydpi=device-dpi
    or similar.... and maybe no targetSDKVersion, just min.

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

    ReplyDelete