Android-- PhoneGap/WebView ignora metaetiquetas de ventana gráfica?

Question

Tengo una página web que intento mostrar en mi dispositivo Android (cargada desde el directorio de activos del proyecto) usando PhoneGap (que usa un conjunto de WebView normal como "appview"), pero la vista web ignora por completo lo siguiente :

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

No importa lo que se propuso en esta línea (he intentado establecer explícitamente el zoom, establecer el ancho/altura en píxeles, etc.), el dispositivo ignora por completo y hace que la página web muy pequeño y anclada a la esquina superior izquierda de la pantalla. Puedo acercar usando el gesto de pellizcar (incluso si desactivo 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 en carga.

Aquí está el aspecto interesante ... Si coloco 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 (escalado 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 ajusta la página a 2x en el emulador sin embargo, no cambia nada en mi dispositivo (Samsung Epic corriendo 2.2.1) . Sin embargo, incluso en 2x, la página no está siendo escalada al ancho del emulador ... Tendría que configurarlo en algo como "escala inicial = 2.5".

Answer 1

I utilizar 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"> 

Answer 2

Trate de añadir las dos líneas siguientes en el método onCreate() de la clase Java que se extiende DroidGap.

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

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

Answer 3

he intente

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

zoom no está activado.

Con el siguiente y el zoom activado

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

pero no es correctamente controlado por la etiqueta de vista, todas las páginas son con zoom ahora incluso con un mínimo de escala = 1 y máximo de la escala = 1 juego en la vista etiqueta.

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

Answer 4

Si desea androide para escalar el contenido de ancho fijo (1024 en el ejemplo) usar 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, se debe añadir detector de eventos para onorientationchange a llamar a la función SetViewport.

Answer 5

Aquí hay buenas respuestas, pero la API de Cordova parece haber cambiado un poco.

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

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