Phonegap Application text and layout too small

Question

I recently build an android app using html, css, javascript and running them through phonegap to create the actual app. One of the problems I encountered in one phone is tha

Answer 1

target-densitydpi=medium-dpi Worked for us.

Scenario Faced this issue when ee upgraded from PhoneGap 2.2 to 3.3.

Answer 2

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.

Answer 3

For Windows Phone (WP8) I've found the following solution: https://github.com/phonegap/phonegap-app-developer/issues/92

1. add to css: @-ms-viewport{ width: device-width; }
2. add to html: <meta name="viewport" content="width=device-width, initial-scale=1" />

3. add to to patch IE 10:

   (function() { if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/10.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( document.createTextNode("@-ms-viewport{width:auto!important}") ); document.getElementsByTagName("head")[0].appendChild(msViewportStyle); } })();

Answer 4

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

Answer 5

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

Answer 6

Adding this solution here

For me, some text were rendering really big, others were the correct size. The problem was with the use of rem values for font-size in the css. For some reason, elements where the font-size was the base value (defined in the body) were rendered way bigger than they should.

The fix was to reassign a global value for the rem font-size in a wrapper element for the entire site.

(my .font-size(1.4) is only a mixin rendering: font-size: 1.4rem; )

So this

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}

Can be fixed with this

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

.wrapper {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}