2013-04-10 2 views
7

Я пытаюсь адаптировать и переносить старый проект в PhoneGap.Сделайте контент для масштабирования и совместим с PhoneGap (с помощью окна просмотра)

Пока проект работает правильно в браузерах Android, но он не работает с PhoneGap, так как он не адаптирует контент для соответствия всему экрану. Он всегда оставляет пустое место, и это не то, что я хотел бы. PhoneGap, похоже, не обращает внимания на мое свойство viewport в метатаге, который я использую.

Я делал несколько тестов, чтобы выяснить проблему без какого-либо результата.

Например, следующий тест содержит только два файла: index.html и config.xml

Он содержит DIV, который 276 пикселей ширины и я хотел бы PhoneGap, чтобы подогнать его всю страницу как Android браузеры.

Кстати, я использую веб-сайт PhoneGap Build для создания этого теста в Интернете.

Вот содержимое файла index.html (я не использую DOCTYPE, чтобы сделать его более простым, но даже использовать его не будет работать должным образом):

<html> 
    <head> 
     <meta name="viewport" content="width=276, user-scalable=yes" /> 
     <title>Title</title> 
    </head> 
    <body> 
     <div style="width:276px; background-color:orange;">I want to make this div fit to the page</div> 
    </body> 
</html> 

И это содержание конфигурации XML-файл (обратите внимание на предпочтение EnableViewportScale установлено значение «истина», но даже будучи установлен на «да» не будет работать):

<?xml version="1.0" encoding="UTF-8" ?> 
<widget xmlns = "http://www.w3.org/ns/widgets" 
     xmlns:gap = "http://phonegap.com/ns/1.0" 
     id  = "com.phonegap.example" 
     versionCode="10" 
     version = "1.0.0"> 

    <!-- versionCode is optional and Android only --> 

    <name>PhoneGap Example</name> 

    <description> 
     An example for phonegap build docs. 
    </description> 

    <author href="https://build.phonegap.com" email="[email protected]"> 
     Hardeep Shoker 
    </author> 

    <preference name="EnableViewportScale" value="true" /> 
</widget> 

Так что есть. Есть ли что-то, что я делаю неправильно? Как я могу архивировать то, что я пытаюсь сделать? Я уверен, что это должно быть довольно простое решение, но я не могу найти его прямо сейчас.

Благодарим заблаговременно и извините за мой английский, это не мой родной язык.

Приветствия, Joan

ответ

1

Попробуйте

<meta name="viewport" content="width=276, user-scalable=1" /> 

или Если добавить следующие строки в ваш метод OnCreate():

WebSettings settings = this.appView.getSettings(); 
settings.setSupportZoom(true); 
settings.setBuiltInZoomControls(true); 

или попробуйте использовать iScroll 4 (http://cubiq.org/iscroll-4) Pinch/Zoom

1

я почти сдался, когда я наткнулся на этот пост: http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html

Основном Я изменил мою запись по умолчанию AndroidManifest.xml от:

<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" /> 

в

<uses-sdk android:minSdkVersion="7" /> 

Вы можете играть с версией бит. Думаю, не нацеливайся на версию 19.Плюс вы можете добавить

target-densitydpi=device-dpi 
target-densitydpi=medium-dpi 
... 

К тегу meta viewport, в зависимости от того, что вы пытаетесь сделать.


EDIT: Хорошо, вот exploanation: http://developer.android.com/guide/webapps/migrating.html Так как Android 4.4 (KitKat), WebView изменилось с новой на основе хрома. Имея целевую версию ниже 19, webview устанавливается в режиме quirks.

Примечание: Если targetSdkVersion установлено значение «18» или ниже, WebView работает в «режиме совместимости» для того, чтобы избежать некоторых из поведения изменений, описанных ниже, настолько близко, насколько это возможно, в то же время обеспечивая ваше приложение обновляет производительность и веб-стандарты. Осторожно, хотя, что макеты одного и узкие колонки и уровни масштабирования по умолчанию не поддерживается на всех на Android 4.4, и там могут быть и другие поведенческие различия, которые не были определены, так что будьте уверены, чтобы проверить ваше приложение на Android 4.4 или более поздней версии, даже если вы сохраняете свой целевой объектSdkVersion равным «18» или ниже.

PP: Использование телефона LG L70.