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

我的一个应用程序我正在使用它，它似乎被“缩小”了，类似于您的应用程序的外观。

为了解决这个问题，我只是将我的视口元标记更改为：

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

Answer 2

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

body{
font-size:200%;
}

Answer 3

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