1

I am developing an application using Phonegap with Jquery Mobile on Android Platform.

I designed a simple page. I haven't started any customization yet. But look at the below screens.

Screen 1: The page launched inside the PhoneGap in my android device Page loaded inside phonegap

Screen 2: The same page launched as a .html page in the same android browser Page loaded in the browser

See the size variations... Why it is displaying differently? Do I need to take some standard consideration while designing jQuery mobile pages for Phonegap?

Malaiselvan
  • 1,153
  • 1
  • 16
  • 42

3 Answers3

7

What happens to be within your viewport meta tag?

For example, you might have something similar to:

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

One of my application I was using this and it seemed to be "Zoomed out" similar to how your application seems.

To solve this, I just changed my viewport meta tag to:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
Drew B.
  • 1,145
  • 10
  • 15
  • 3
    I removed only the "target-densitydpi=device-dpi" and it works fine. – Malaiselvan Nov 10 '13 at 10:50
  • More on that: http://bowdenweb.com/wp/2011/05/meta-nameviewport-contenttarget-densitydpidevice-dpi.html So, I bet you run into blurry image issue if you let Android scale. Right? – Costa Michailidis Jul 16 '14 at 16:12
0

You should use font size in percentage format. that will work in any phonegap app.. example:

body{
font-size:200%;
}
Vicky Gonsalves
  • 11,593
  • 2
  • 37
  • 58
0

Best way is to use the viewport units, such as vw and vh, which set the font-size of an element relative to the dimensions of the viewport.

MPaulo
  • 1,491
  • 14
  • 19