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

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