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

Question

I have a Phonegap app designed to run on Android phones and tablets. The scale of text and images looks fine on a phone, but too small on a 7” tablet.

Is there a way to

Answer 1

Consider that target-densitydpi has been deprecated and removed from Webkit according to Pete LePage (https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB), I think a better approach is to use media queries to target high-dpi devices before dropping phonegap

Answer 2

Before we give up on phonegap lets try improve it. I was stuck until I solved it using this solution.

Change your viewport to this :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

Ref : Phonegap Application text and layout too small

Answer 3

I have a couple of different solutions to suggest:

1. Change viewport dynamically using Javascript (more info here)

2. Set all sizes in rem units rather than px. Then you can scale everything by adjusting document font-size. Sketching an example:

   function resize() {
   var w = document.documentElement.clientWidth;
   var h = document.documentElement.clientHeight;
   var styleSheet = document.styleSheets[0];
   // ar = aspect ratio h/w; Replace this with your apps aspect ratio
   var ar = 1.17;
   // x = scaling factor
   var x = 0.1; 
   var rem;
   if (h / w > ar) { // higher than aspect ratio
       rem = x * w;
   } else { // wider than aspect ratio
       rem = x * h;
   }
   document.documentElement.style.fontSize = rem + 'px';
   }
   

Answer 4

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');
    }
}