CODEWITHSUNDEEP
androidjquery-mobilecordova
Malaiselvan
Malaiselvan

Reputation: 1121

Jquery Mobile + Phonegap the font sizes are different

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?

Upvotes: 1

Views: 1926

Answers (3)

MPaulo
MPaulo

Reputation: 1491

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.

Upvotes: 0

Drew B.
Drew B.

Reputation: 1145

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" />

Upvotes: 7

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

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

body{
font-size:200%;
}

Upvotes: 0

Related Questions