Jquery Mobile + Phonegap的字体大小不同

Question

我正在Android平台上使用Phonegap与Jquery Mobile开发应用程序。

我设计了一个简单的页面。我还没有开始任何定制。但请看下面的屏幕。

屏幕1：我的Android设备中的PhoneGap内部启动的页面

屏幕2：在同一个Android浏览器中以.html页面启动的同一页面

查看大小变化...为什么显示不同？在为Phonegap设计jQuery移动页面时，我是否需要考虑一些标准问题？

Answer 1

您的视口元标记中会发生什么？

例如，您可能有类似的内容：

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

我的一个应用程序我正在使用它，它似乎是“缩小”类似于你的应用程序的样子。

要解决此问题，我只是将viewport元标记更改为：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />

Answer 2

您应该使用百分比格式的字体大小。这将适用于任何手机应用程序.. 例如：

body{
font-size:200%;
}

Answer 3

最好的方法是使用视口单位，例如vw和vh，它们设置元素相对于视口尺寸的字体大小。