Aplicación web de pantalla completa para Android

Quiero ejecutar mi aplicación web, que he programado con HTML5, en modo de pantalla completa en Android. (Ocultar la barra de estado y la barra de dirección / navegación)

Para iOS solo escribes:

<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Pero eso no funcionó en Android.

Hay un montón de soluciones con Javascript, pero todas las soluciones que he intentado no funcionan.

Alguien sabe la solución?

No creo que encuentre una solución global para eso ya que no todo el mundo usa el navegador predeterminado de android (por ejemplo, prefiero delfín).

Frente a ese hecho tendrá que probar cada hack javascript sucio para forzar ese comportamiento.

La única razón por la que esto funciona para los dispositivos de Apple es el hecho de que Apple es muy restrictivo sobre el desarrollo de un navegador personalizado y todo el mundo se pega a la aplicación predeterminada.

Esto funcionó para mí en Chrome para Android.

Agregue esto a las etiquetas de la cabeza:

 <meta name="mobile-web-app-capable" content="yes"> 

A continuación, en el menú del navegador de cromo, Ir a Añadir a la página principal. Este icono ahora abrirá su sitio web en pantalla completa.

Utilizo una mezcla de la metaetiqueta HTML para iOS y una solución de JavaScript. Se quita la barra de direcciones en iOS y dispositivos Android. No saca la barra inferior de iOS, ya que esto sólo desaparecerá cuando el usuario instale la página web como una aplicación HTML5 en su pantalla de inicio.

 <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <script type='text/javascript' charset='utf-8'> // Hides mobile browser's address bar when page is done loading. window.addEventListener('load', function(e) { setTimeout(function() { window.scrollTo(0, 1); }, 1); }, false); </script> 

Utilizo PHP en el backend para hacer solamente el Javascript para el hojeador móvil con la detección siguiente del browser del móvil

 if (preg_match('/iphone|ipod|android/',strtolower($_SERVER['HTTP_USER_AGENT']))) 

Usted puede lograr esto con googles nueva aplicación web progresiva que agrega el trabajador de servicio. Echa un vistazo aquí: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ y https://developers.google.com/web/progressive-web-apps/ .

Usted puede agregar el icono en homescreen para su webapp, conseguir la pantalla completa, puede utilizar la notificación del empuje etc.

 <meta name="apple-mobile-web-app-capable" content="yes" /> 

Esta etiqueta está diseñada para mostrar un entorno sin cromo después de haber agregado su sitio a la pantalla de inicio del iPhone.

No confiaría en esto para trabajar para android.

Para que la barra del navegador se desplace fuera del camino una vez que la página se haya cargado, vea la respuesta de esta pregunta: Eliminación de la barra de direcciones del navegador (para ver en Android)

Como indica Google

Desde Chrome M31, puedes configurar tu aplicación web para que se añada un icono de acceso directo a la pantalla de inicio de un dispositivo y que la aplicación se lance en "modo de aplicación" de pantalla completa utilizando el elemento de menú "Agregar a la pantalla de inicio" de Chrome para Android.

Consulte https://developer.chrome.com/multidevice/android/installtohomescreen

Desde el lado de Android y para las versiones inferiores al nido de abeja , esto debe hacerse usando:

 Window w = getWindow(); w.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); w.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); 

Si el navegador de Android no hace algo así cuando lee la meta información, intentaría mirar en el teléfono para comprobar si resuelven este problema.

Este código puede ayudar …

 public void onCreate(Bundle savedInstanceState) { requestWindowFeature(Window.FEATURE_NO_TITLE); --> hide the Top Android Bar. super.onCreate(savedInstanceState); setContentView(R.layout.main); 
  • Rendimiento de la vista web de Android a bitmap, html5 javascript, problema de devolución de llamada
  • Android 4.0.3, window.openDatabase no funciona
  • Leer archivo local en Phonegap
  • Cordova File plugin nunca llega a estar listo en Android
  • Ion-scroll borra mi imagen cuando se amplía en el marco iónico
  • En la vista web de Android cuando ejecuto javascript desaparece el sotfkeyboard
  • Ocultación de teclados suaves en dispositivos móviles cuando se utilizan divs contenteditable
  • Websocket en Android 4.4 con Phonegap
  • Jquery 1.6.2 funciona en el emulador de Android 2.1 pero no en el Samsung Galaxy S
  • ¿Depuración en navegadores móviles?
  • Los navegadores de Android no gestionan correctamente los eventos de touchmove
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.