PhoneGap: Макеты отображаются неправильно

Question

Я разрабатываю приложение на основе PhoneGap для устройств Android. Мое приложение отлично работает в устройстве AVD (320x480), однако в AVD с разрешением 720x1280 (Galaxy Nexus) он отображает элементы макета неправильно, т. Е. Они слишком малы. Вот скриншоты LINK. Как я могу поместить макет на любой дисплей устройства?

АВД характеристики:

• 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 в зависимости от размера экрана и плотности пикселей.