Galaxy Nexus ignora la metaetiqueta del visor
Estoy creando una aplicación PhoneGap. Mi aplicación está diseñada como una interfaz de 320px. Mi etiqueta de viewport dentro de la aplicación es:
<meta name="viewport" content="width=320, initial-scale=0.5, maximum-scale=0.5, user-scalable=no"/> Esto funciona como se espera en mi Galaxy S2 que ejecuta Ice Cream Sandwich. La interfaz 320px llena todo el ancho de la pantalla.
- ¿Es posible obtener datos de formularios HTML en android mientras se usa webView?
- ¿Cómo puedo obtener un objeto File de PhoneGap camera.getPicture?
- Cómo convertir la ubicación de toque de View en la ubicación de la pantalla HTML de WebView
- DeviceReady no funciona en la aplicación PhoneGap, ¿cómo?
- Enfoque la zona de texto con el cursor tras el texto en el navegador de Android
Sin embargo, al probar el código anterior en un Galaxy Nexus, la ventana de visualización tiene un ancho de 360px. Así que mis elementos no llenan la pantalla. He intentado agregar la línea siguiente al archivo de appname.java de mi Cordova:
this.appView.getSettings().setUseWideViewPort(true);
Sin embargo, esto no tiene efecto.
- HTML localStorage es nulo en Android cuando se usa webview
- ¿Por qué escribir una aplicación si un servidor web va a hacer?
- Lectura de Json String usando Gson resultados error "no un JSON Array"
- Reaccionar nativo: seleccionable vista de lista de sección da error
- ¿Por qué se eliminó el soporte de los Trabajadores Web HTML5 del navegador de Android en las versiones 2.2 y superiores?
- ¿La aplicación móvil HTML5 se está ejecutando mientras la pantalla del teléfono está desactivada?
- ¿Hay alguna manera de interceptar JavaScript activado URL en webview?
- ¿Existe una guía para desarrolladores de navegadores integrada de Android? ¿Dónde buscar las diferencias entre motores JS?
Intenta reemplazarlo con esto:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Debe redimensionar el dispositivo específico, sin embargo no puedo probar esto.
Las respuestas que veo están muy cerca, pero están ignorando un punto que trajo: su interfaz está diseñada para 320px. width = device-width hará que se ajuste a la pantalla, pero eso no asegura que su interfaz se quede en 320px.
Mi solución es construir un poco sobre la respuesta de Wayneio, proporcionando el CSS / marcado necesario para asegurarte de que solo necesites una hoja de estilo (y que no necesita ser una respuesta).
<html> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> </head> <body> <div id="interfaceWrap"> // insert interface here </div> </body> </html>
Lo que este marcado hace es permite confinar su interfaz a un contenedor específico que puede establecer propiedades a través de CSS. Lo que yo recomendaría es algo como esto:
#interfaceWrap { position: relative; width: 320px; margin-left: auto; margin-right: auto; }
Esto básicamente le dice al navegador que sin importar la ventana de meta-etiqueta que establece el ancho de la página, coloque mi interfaz en el centro horizontal ( margin-left & margin-right: auto ) y guárdelo fijo en el ancho 320px ( width: 320px ). Puede agregar cualquier combinación de estilos para obtener lo que realmente busca.
¡Espero que esto ayude!
Utilizar esta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Compruebe esta presentación para personalizar la metaetiqueta
- Ocultar la interfaz de usuario del sistema en Lollipop
- ¿Cómo probar un IntentService con Robolectric?