Android-- PhoneGap/WebView ignoruje meta tagi viewport?

Question

Mam stronę internetową, którą próbuję wyświetlić na moim urządzeniu z systemem Android (załadowanym z katalogu zasobów projektu) przy użyciu PhoneGap (która używa zwykłego zestawu WebView jako "appview"), ale widok internetowy zupełnie ignoruje następujące :

<meta name = "viewport" content = "user-scalable=no,width=device-width" /> 

Bez względu na to, co się w tej linii (próbowałem jawnie ustawienie zoomu, ustawiania szerokość/wysokość w pikselach, itd.), urządzenie całkowicie ignoruje je i sprawia, że ​​strona bardzo małe i zakotwiczone w lewym górnym rogu ekranu. Mogę powiększyć przy użyciu gestu szczypanie (nawet jeśli wyraźnie wyłączyć zoom w powyższym kodzie HTML), ale chcę, aby strona została powiększona, aby prawidłowo dopasować urządzenie do obciążenia.

Oto interesujący fragment ... Jeśli umieściłem tę samą witrynę na moim serwerze sieciowym i przejdę do niej za pomocą domyślnej przeglądarki na moim urządzeniu testowym, strona ładuje się prawidłowo (przeskalowana do odpowiedniego rozmiaru dla urządzenia).

Proszę o pomoc.

Dzięki.

Edit1:

Moje obecne ustawienia to:

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 

To też jest całkowicie ignorowany.

EDIT2:

Oto coś ciekawego ...

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, user-scalable=no" /> 

Powyższa linia skaluje stronę do 2x w emulatorze jeszcze nic nie zmienia w moim urządzeniu (Samsung Epic uruchomiony 2.2.1) . Mimo to, nawet przy 2x, strona nie jest skalowana do szerokości emulatora ... Musiałbym ustawić to na coś w rodzaju "initial-scale = 2.5".

Answer 1

Używam tego na iPhone z PhoneGap

<meta name="description" content="trevorrudolph.com"> 
<meta name="format-detection" content="telephone=no"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<link rel="apple-touch-icon" href="http://trevorrudolph.com/wordpress/apple-touch-icon.png"> 

Answer 2

spróbuj dodać następujące dwie linie w metodzie onCreate() klasy Java, który rozciąga DroidGap.

this.appView.getSettings().setUseWideViewPort(true); 
this.appView.getSettings().setLoadWithOverviewMode(true); 

Daj mi znać, jeśli tag rzutni teraz zaczyna pracować.

Answer 3

mam spróbować

this.appView.getSettings().setUseWideViewPort(true); 
this.appView.getSettings().setLoadWithOverviewMode(true); 

zoom nie jest włączona.

z następującym ustawieniu zoomu włączona

this.appView.getStrings().setSupportZoom(true); 

Ale to nie jest kontrolowane prawidłowo przez tag rzutni, wszystkie strony są teraz zoomable nawet z minimalną skalę = 1 oraz maksymalną skalę = 1 Ustaw w rzutni etykietka.

Nawigacja po stronie dostała błędu, klikając przycisk na stronie, a przycisk Wstecz Androida nie działa poprawnie.

Answer 4

Jeśli chcesz android do skalowania zawartości do stałej szerokości (w przykładzie 1024) użyć tego:

<meta name="viewport" id="viewport" content="width=1024"> 
<script type="text/javascript"> 
    var viewPortWidth = 1024; 
    function setViewport() { 
    if ((navigator.userAgent.toLowerCase().indexOf("android")!=-1)) { 
     var wW0 = window.screen.width; 
     var scale = wW0/viewPortWidth; 
     var vPort = "width="+viewPortWidth+", maximum-scale="+scale+", minimum-scale="+scale+", initial-scale="+scale+", user-scalable=yes"; 
     document.getElementById("viewport").setAttribute("content", vPort); 
    } 
    } 
    setViewport(); 
</script> 

Ponadto, należy dodać detektor zdarzeń dla onorientationchange wywołać funkcję setViewport.

Answer 5

Istnieją dobre odpowiedzi, ale wydaje się, że interfejs API Cordova nieco się zmienił.

W metodzie OnCreate (po loadUrl lub po wywołaniu init jawnie):

CordovaWebViewEngine engine = appView.getEngine(); 
    SystemWebView webView = (SystemWebView)engine.getView(); 
    WebSettings settings = webView.getSettings(); 
    settings.setUseWideViewPort(true); 
    settings.setLoadWithOverviewMode(true);