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

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