问题
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
Screen 2: The same page launched as a .html page in the same android 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?
回答1:
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" />
回答2:
You should use font size in percentage format. that will work in any phonegap app.. example:
body{
font-size:200%;
}
回答3:
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.
来源：https://stackoverflow.com/questions/19883968/jquery-mobile-phonegap-the-font-sizes-are-different