Scaling a Phonegap App for Different Android Screen Sizes/Densities

Scaling a Phonegap app for different Android screen sizes/densities?

Just noticed I never answered this. The solution I used in the end was to use media queries to explicitly set font sizes and image assets based on the device size. Device testing showed this worked on all my target devices: iPhone, iPad, Android phones, Android 7" tablets, Android 10" tables. Hope it helps someone else.

For example:

/* Start with default styles for phone-sized devices */
    p,li{
        font-size: 0.9em;
    }
    h1{
        font-size: 1.2em;
    }
    button{
        width: 24px;
        height: 12px;
    }
    button.nav{
        background-image: url('img/phone/nav.png');
    }

@media only screen and (min-device-width : 768px) { /* 7" tablets */
    p, li{
        font-size: 1.3em !important;
    }
    h1{
        font-size: 1.6em !important;
    }
    button{
          width: 32px;
          height: 16px;
    }
    button.nav{
        background-image: url('img/tablet7/nav.png');
    }
}
@media only screen and (min-device-width : 1024px) { /* 10" tablets and iPad */
    p, li{
        font-size: 1.5em !important;
    }
    h1{
        font-size: 1.8em !important;
    }
    button{
        width: 48px;
        height: 24px;
    }
    button.nav{
        background-image: url('img/tablet10/nav.png');
    }
}

Android phonegap app scaling too large

I think you should read this article
Basically you should consider screen density not the actual width or height of device and than try to compensate with zoom.Check the section "Building web pages to support different screen densities"

Android menu icons scaling issue

You can string together multiple qualifiers and create a custom bucket. So in addition to the drawable-xhdpi bucket I added a drawable-sw720dp-xhdpi bucket with larger icons for the 10" tablet. Now tablet displays the slightly larger icons while the phone still uses the standard bucket. The solution can be found in the comments of the selected answer in this post by @Theo. Unfortunately the documentation does not state that multiple qualifiers are supported.

Phonegap app screen density is too low in iPad and black border issue

In your config.xml file you need to enable both handsets type.

You most probably have currently:

<preference name="target-device" value="handset"/>

or you won't have any preference for target device at all. You must make an entry or change the entry above to:

<preference name="target-device" value="universal"/>

That way the build will be compatible with both iPad and iPhone devices.

How does PhoneGap handle screen size changes?

PhoneGap is not in charge of handling screen size changes. Your html/css should handle this. Have a look at what responsive design is. Maybe try to use stuff like http://jquerymobile.com/ or http://twitter.github.com/bootstrap/.

One more : http://foundation.zurb.com/

---

Related Topics