PhoneGap：布局显示不正确

Question

我正在为 Android 设备开发基于 PhoneGap 的应用程序。我的应用在 AVD 设备 (320x480) 中运行良好，但在 720x1280 分辨率的 AVD (Galaxy Nexus) 中，它显示布局的元素不正确，即它们太小。这是截图的LINK。如何使布局适合任何设备显示？

AVD 特点：

• Eclipse Juno IDE
• Java SE 7
• Android SDK API 17
• PhoneGap 2.7.0
• jQuery 1.9.1 和 jQuery Mobile 1.3.0

这里是 meta 标签：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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" />

我真的被困住了，需要帮助。提前致谢。

Answer 1

请说明您希望看到的结果，也许我可以给您更好的答案。

您正在处理不同的分辨率和像素密度，因此任何具有固定宽度和/或高度的元素看起来都会有所不同。在这些按钮的情况下，高度是固定的，但宽度大约是页面的 95%，因此它们会伸展以填充宽度但更窄，因为它是固定数量的像素高并且像素密度增加了。

您可能需要使用 CSS 媒体查询来根据屏幕大小和像素密度调整字体大小、宽度和高度。