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?

8 Solutions collect form web for “Aplicación web de pantalla completa para Android”

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); 
  • Error al llamar a Appregistry.runApplication en reactivo-nativo
  • Servidor JSCallback cerrado: detener devoluciones de llamada
  • Obtención de la ubicación actual de un dispositivo mediante la función {X} api
  • ¿Reacciona la compilación nativa de JavaScript en Java para Android?
  • Phonegap Cordova - Barra de estado negra en la parte inferior después de la pantalla completa
  • React-nativo: detecta el dev o la producción env
  • Cómo depurar el error de solicitud de ajax?
  • Pregunta Javascript - ¿qué es "ventana"?
  • WebApp usando webRTC para videochat multiplataforma en iOS Browser y Android Chrome
  • ¿Cómo puedo recuperar una cadena de Javascript en Android?
  • ¿Cómo resaltar el texto permanentemente en la vista web de Android?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.