How do I make my PhoneGap Android APP fit all devices?

Question

I built my APP as was instructed using Cordova, and I can't get the HTML pages I make to fit the scree, they're always larger.

This is the generated Android App Code, and there was no .xml file generated for layout

public class APP extends CordovaActivity 
{
  @Override
  public void onCreate(Bundle savedInstanceState)
    {   
    super.onCreate(savedInstanceState);
    super.init();
    // Set by <content src="index.html" /> in config.xml
    super.loadUrl(Config.getStartUrl());
    //super.loadUrl("file:///android_asset/www/index.html");
    }
}

And I put this in the Meta tag, of the HTML file.

  <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

Running this App gives me an app that is much bigger than the size of the screen, also I use JQuery Mobile to structure the HTML, any solutions would be much appreciated.

Answer 1

---

Usually I want pages not to have a page width of 800 to 900 pixels, as the Android and iPhone browsers set it to by default. To have the page width the same as the device width, I set the following meta tags:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

Also refer https://developer.android.com/guide/webapps/targeting.html

Answer 2

While not much can be suggested to you unless you show us your HTML and CSS code, this is a common problem when creating apps using web technologies for devices with vastly different screen resolutions.

One work around would be to define the dimensions of UI elements in em units instead of px . Then you could set appropriate base font-size for different screen resolutions using CSS media queries or JavaScript

Answer 3

use this one

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport">

100% works. you can view my app here.

http://www.revivalx.com/my/#home