1

I have ported a simplified version of a website that uses bootstrap to mobile using bootstrap3 and phonegap.

In my desktop and tablet the pages are showing with a proper size, however, when I open the pages in phonegap's webview, they render in such a small size that I can't even read the text (I am using HTC One for my tests).

It seems playing with the viewport settings should allow me to scale the content appropriately according to the resolution of the device:

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

However, I tried several combinations of settings for viewport with no success:

  1. I tried with initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0 but nothing changed.
  2. I also tried with target-densitydpi=medium-dpi which made the content bigger indeed, but it was in some sort of "zoom" mode so I was only able to see a section of the content.
  3. I tried removing target-densitydpi=device-dpi and I got the same result as in 2.

Any clues what combination would allow me to scale all HTML elements to a reasonable size (text, buttons, navbars, inputs, wells, etc...)

Thanks!

apanosa
  • 621
  • 3
  • 10
  • http://stackoverflow.com/questions/4916983/android-phonegap-webview-ignores-viewport-meta-tags https://gist.github.com/nolanlawson/5220421 – Christina Nov 27 '13 at 15:05
  • 1
    I think this is the answer: http://stackoverflow.com/questions/15194940/phonegap-application-text-and-layout-too-small – Christina Nov 27 '13 at 15:07

0 Answers0