Phonegap Application text and layout too small

I had the same problem and solved it changing the viewport.I also thought the problem was phonegap, but it really was that the devices used for testing had different dpi.

My solution was to change the target-densitydpi on the viewport to:

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

Hope it helps

I had a similar problem and did some research I thought is worth sharing:

• Set the viewport's target-densitydpi to medium-dpi (=160dpi), as already suggested. This virtualizes the px unit, e.g. 1px in html/css then corresponds to 2 physical pixels on a 320dpi device. Note that images are scaled (and blurred) as well.

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

• CSS: Use media queries to implement conditional styling. Adapting for different screen sizes dependent on width, height, aspect or orientation is straight-forward. Different pixel densities can be handled with device-pixel-ratio (thanks to Marc Edwards for providing an example: https://gist.github.com/marcedwards/3446599).

  @media screen and (-webkit-min-device-pixel-ratio: 1.5),       screen and (-o-min-device-pixel-ratio: 15/10){  body { background-image: ... } /* provide high-res image */}

  The media feature resolution is cleaner than device-pixel-ratio, but it lacks mobile browser support.

• Javascript: Adapt button sizes, images etc. based on window.devicePixelRatio and window.screen.width and window.screen.height. Layouting per Javascript is considered as bad practice. Also flickering might result during loading as the execution starts after the pageload event.

• -webkit-image-set and image src-set make it easy to provide high-res images for retina displays, see http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff. Browser support is limited.

   background-image: -webkit-image-set(   url(icon1x.jpg) 1x,   url(icon2x.jpg) 2x );

It appears that removing the target-densitydpi altogether brings the best results.

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

This should be more than enough to control your app's appearance in most cases.