origin - Android: ¿PhoneGap/WebView ignora las metaetiquetas de la ventana gráfica?

cordova whitelist ionic

Question

Tengo una página web que trato de mostrar en mi dispositivo Android (cargado desde el directorio de activos del proyecto) usando PhoneGap (que usa un conjunto de vista web normal como la "vista de aplicación"), pero la vista web ignora completamente lo siguiente:

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

No importa lo que establezca en esta línea (he intentado configurar explícitamente el zoom, establecer el ancho / alto en píxeles, etc.), el dispositivo lo ignora por completo y hace que el sitio web sea muy pequeño y esté anclado a la esquina superior izquierda de la pantalla. Puedo hacer zoom utilizando el gesto de pellizco (incluso si deshabilito explícitamente el zoom en el código html anterior), pero quiero que la página se amplíe para que se ajuste correctamente al dispositivo cuando se carga.

Aquí está la parte interesante ... Si pongo exactamente el mismo sitio en mi servidor web y navego hacia él usando el navegador predeterminado en mi dispositivo de prueba, la página se carga correctamente (escalada al tamaño correcto para el dispositivo).

Por favor ayuda.

Gracias.

EDIT1:

Mis ajustes actuales son:

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

Eso también es completamente ignorado.

EDIT2:

Aquí hay algo interesante ...

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

La línea anterior escala la página a 2x en el emulador pero no cambia nada en mi dispositivo (Samsung Epic ejecutando 2.2.1). Aun así, incluso a 2x, la página no se está escalando al ancho del emulador ... Tendría que configurarlo en algo como "escala inicial = 2.5".

Answer 1

Hay buenas respuestas aquí, pero la API de Cordova parece haber cambiado un poco.

En el método OnCreate (después de loadUrl o después de llamar a init explícitamente):

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

Answer 2

Intente agregar las siguientes dos líneas en el método onCreate () de la clase Java que extiende DroidGap.

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

Avísame si tu etiqueta de ventana gráfica ahora comienza a funcionar.

Answer 3

Lo he intentado

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

El zoom no está habilitado.

Con el siguiente ajuste, zoom habilitado

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

Pero no está controlado correctamente por la etiqueta de la ventana gráfica, todas las páginas tienen zoom ahora, incluso con la escala mínima = 1 y la escala máxima = 1 establecidas en la etiqueta de la ventana gráfica.

Y la navegación de la página tiene un error ahora, hacer clic en el botón en la página y el botón de retroceso de Android no funciona correctamente.

Answer 4

Si quieres que Android aumente tu contenido a un ancho fijo (1024 en el ejemplo) usa esto:

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

Además, debe agregar la escucha de eventos para que onorientationchange llame a la función setViewport.

Answer 5

Yo uso esto en iphone con 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">