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


Comments

  1. Unknown2 August 2012 at 09:43

    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. Antony6 August 2012 at 03:11

    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. hansdampf5 April 2013 at 17:18

    same problem. this is very frustrating.

    ReplyDelete
  4. Antony6 April 2013 at 14:28

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

    ReplyDelete
  5. rendi14 May 2013 at 19:29

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

    ReplyDelete
  6. NibbleByte26 February 2015 at 17:14

    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. Unknown14 April 2016 at 12:07

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Launch a website as a mobile app using PhoneGap/Apache Cordova

-
How to launch a website as a mobile app using PhoneGap/Apache Cordova I spent some time recently trying to find out how to launch my website as a mobile app.  The information was available around the internet but since it took me a while, I thought I'd collate it here in one simple post for anyone who wants to do the same I decided to use Apache Cordova since it gave me the framework for developing an HTML5 site as a mobile app already, meaning all I really needed to do was plug my website into it.  Their getting started guide has good information on how to create a Cordova project - I used Android but you can use whatever means you wish A basic Cordova app gives you a way to launch the app with an HTML page that you use to display your app contents.  The trick then is make the page load your website which you can do in one of 3 ways: 1. Package your site inside the app. This means it loads fast and without an internet connection.  The downside i...
Read more

How to manually add Cordova plugins to your app

-
I have recently been trying to add a plugin to an existing Cordova app (using Cordova 3.7.0).  Since I didn't create my app using the CLI I had 2 options: Create a new app using the CLI and copy my source files over Add the plugin files to my existing app For some reason I don't really like the idea of the CLI and wanted to do do this manually into an existing Android app, using Cordova, rather than use the CLI.  Don't ask me why, I just like doing things manually so I know what's going on under-the-hood I guess If you are like me and want to add a plugin manually, this is how to do it.  These instructions, though written for Android, will work for any any supported platform.  I will call out any differences between platforms that I know of Get the plugin source files You need the source code files for your platform (so .java for Android, .m .h for iPhone etc) as well as the plugin javascript files.  You might be able to get the source files from ...
Read more

Android Live Wallpaper using Processing in Android Studio

-
We've recently wanted to create an Android Live Wallpaper using Processing, which is an ideal language for writing these as it makes it easy to create exciting animations using a Java-like language As it turns out, creating a live wallpaper from some existing Processing code is surprisingly simple You can, of course, do this using the Processing environment as shown in the tutorial over on processing.org . This covers the basics but we wanted to incorporate this into our Android Studio app which took a few extra steps Step 1 - Create a Processing sketch in your Android app If you don't already have a Processing sketch, now's the time to write one! If you've written this using the Processing environment, you'll need to create a new class that extends processing.core.PApplet and import the processing-android library, similarly to the processing.org tutorial on creating a processing app in Android Studio import processing.core.PApplet; public class YourSke...
Read more