PhoneGap：布局显示不正确

Question

我正在为Android设备开发基于PhoneGap的应用。我的应用程序在AVD设备（320x480）中运行良好，但是在具有720x1280分辨率（Galaxy Nexus）的AVD中，它不正确地显示布局元素，即它们太小。以下是截图的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媒体查询根据屏幕大小和像素密度调整字体大小，宽度和高度。