Android - PhoneGap/WebView ignoriert Viewport-Meta-Tags?

Question

Ich habe eine Webseite, die ich versuche, auf meinem Android-Gerät (geladen aus dem Assets-Verzeichnis des Projekts) mit PhoneGap (die eine normale WebView als "appview" festgelegt verwendet) anzuzeigen, aber die Webview vollständig ignoriert die folgenden:

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

Egal, was ich in dieser Zeile einstelle (ich habe versucht, den Zoom explizit einzustellen, die Breite/Höhe in Pixeln festzulegen usw.), das Gerät ignoriert es völlig und stellt die Website sehr klein und in der oberen linken Ecke des Bildschirms verankert dar. Ich kann mit der Pinch-Geste zoomen (auch wenn ich den Zoom im obigen HTML-Code explizit deaktiviere), aber ich möchte, dass die Seite so vergrößert wird, dass sie beim Laden richtig auf das Gerät passt.

Jetzt kommt der interessante Teil... Wenn ich dieselbe Website auf meinen Webserver lege und sie mit dem Standardbrowser auf meinem Testgerät aufrufe, wird die Seite korrekt geladen (auf die richtige Größe für das Gerät skaliert).

Bitte um Hilfe.

Merci.

EDIT1:

Meine aktuellen Einstellungen sind:

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

Auch das wird völlig ignoriert.

EDIT2:

Hier ist etwas Interessantes...

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

Die obige Zeile skaliert die Seite auf 2x im Emulator, ändert aber nichts auf meinem Gerät (Samsung Epic mit 2.2.1). Trotzdem wird die Seite auch bei 2x nicht auf die Breite des Emulators skaliert... Ich müsste das auf etwas wie "initial-scale=2.5" einstellen.

Answer 1

Versuchen Sie, die folgenden zwei Zeilen in die onCreate()-Methode der Java-Klasse einzufügen, die DroidGap erweitert.

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

Lassen Sie mich wissen, ob Ihr Viewport-Tag jetzt funktioniert.

Answer 2

Ich habe versucht

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

Der Zoom ist nicht aktiviert.

Mit der folgenden Einstellung, Zoom aktiviert

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

Aber es ist nicht richtig durch das Viewport-Tag gesteuert, alle Seite sind zoombar jetzt auch mit minimum-scale=1 und maximum-scale=1 im Viewport-Tag gesetzt.

Und die Seitennavigation hat jetzt einen Fehler, das Klicken auf die Schaltfläche auf der Seite und die Android-Zurück-Schaltfläche funktionieren nicht richtig.

Answer 3

Es gibt hier gute Antworten, aber die Cordova-API scheint sich ein wenig geändert zu haben.

In der OnCreate Methode (nach loadUrl oder nachdem Sie init ausdrücklich):

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

Answer 4

Wenn Sie möchten, dass Android Ihren Inhalt auf eine feste Breite (im Beispiel 1024) skaliert, verwenden Sie dies:

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

Außerdem sollten Sie einen Ereignis-Listener für onorientierungsänderung um die Funktion setViewport aufzurufen.

Answer 5

Ich verwende dies auf dem iPhone mit 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">