2013-04-10 10 views
7

Próbuję dostosować i przenieść stary projekt do PhoneGap.Dostosowywanie zawartości do rozmiaru i dopasowania za pomocą PhoneGap (przy użyciu widoku)

Do tej pory projekt działa poprawnie pod przeglądarkami systemu Android, ale nie działa w PhoneGap, ponieważ nie dostosowuje zawartości do rozmiaru całego ekranu. Zawsze pozostawia puste miejsce i to nie jest to, czego bym chciał. PhoneGap nie zwraca uwagi na moją właściwość viewport w metatagu, którego używam.

Wykonałem kilka testów, aby znaleźć problem bez żadnego wyniku.

Na przykład, następujący test zawiera tylko dwa pliki: index.html i config.xml

Zawiera DIV, który jest 276 pikseli szerokości i chciałbym PhoneGap aby zmieścić całą stronę jako Androida przeglądarki robią.

Nawiasem mówiąc, korzystam z witryny internetowej PhoneGap Build, aby zbudować ten test online.

Oto zawartość pliku index.html (nie używam DOCTYPE aby to prostsze, ale nawet przy użyciu go nie będzie działać poprawnie):

<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> 

I to jest zawartość config .xml plik (zwróć uwagę na preferencje EnableViewportScale ustawiona na "true", ale nawet jest ustawiony na "tak" nie będzie działać):

<?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> 

Tak to jest. Czy jest coś, co robię źle? Jak mogę archiwizować to, co próbuję zrobić? Jestem pewien, że powinno to być całkiem proste rozwiązanie, ale nie mogę go teraz znaleźć.

Dziękuję bardzo z góry i przepraszam za mój angielski, to nie mój język ojczysty.

Cheers, Joan

Odpowiedz

1

Spróbuj

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

lub Jeśli dodać następujące linie do swojego() metoda onCreate:

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

lub spróbuj iScroll 4 (http://cubiq.org/iscroll-4) Pinch/Powiększanie

1

I prawie zrezygnował, gdy natknąłem się na tym stanowisku: http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html

Basicly I zmodyfikowane domyślną pozycję AndroidManifest.xml od:

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

do

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

Możesz grać z wersją lil. Tylko nie celuj w wersję 19, jak sądzę.Dodatkowo możesz dodać

do twojego meta viewport tag, w zależności od tego, co próbujesz zrobić.


EDIT: Ok, oto exploanation: http://developer.android.com/guide/webapps/migrating.html Od Androida 4.4 (KitKat), WebView zmieniła się z nowym na bazie chromu. Mając wersję docelową poniżej 19, widok internetowy jest ustawiony w tryb dziwactwa.

Uwaga: Jeśli targetSdkVersion jest ustawiony na „18” lub mniej, WebView działa w trybie „quirks” w celu uniknięcia niektórych zachowań zmian opisanych poniżej, jak najdokładniej, zapewniając jednocześnie Twoja aplikacja poprawia wydajność i standardy sieciowe. Uważaj jednak, że układy jedno- i wąskie kolumny i domyślne poziomy powiększenia nie są obsługiwane w ogóle na Androidzie 4.4, i mogą istnieć inne behawioralne różnice, które nie zostały zidentyfikowane, więc należy przetestować aplikację na Android 4.4 lub nowszy, nawet jeśli ustawisz parametr targetSdkVersion na "18" lub mniej.

PP: Korzystanie z telefonu LG L70.

Powiązane problemy