pantalla - fullscreen javascript example

Aplicación web de pantalla completa para Android

Question

Quiero ejecutar mi aplicación web, que programé con HTML5, en modo de pantalla completa en Android. (ocultar la barra de estado y la dirección / barra de 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 muchas soluciones con Javascript, pero todas las soluciones que probé son inoperantes.

Alguien sabe la solución?

Answer 1

Como lo indica Google

Desde Chrome M31, puede configurar su aplicación web para agregar un icono de acceso directo a la pantalla de inicio de un dispositivo y hacer que la aplicación se inicie en modo de aplicación a pantalla completa con la opción de menú "Agregar a la pantalla de inicio" de Chrome for Android.

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

Answer 2

Desde el lado de Android y para versiones inferiores a honeycomb , esto debe hacerse usando:

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

Si el navegador Android no hace algo así cuando lee la metainformación, trataría de buscar en phonegap para verificar si resuelven este problema.

Answer 3

Este código podría ayudar ...

public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_NO_TITLE); --> hide the Top Android Bar.
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

Answer 4

Esto funcionó para mí en Chrome para Android.

Agregar esto a las etiquetas de la cabeza:

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

Luego, en el menú del navegador Chrome, vaya a Agregar a la página de inicio. Este icono ahora abrirá su sitio web en pantalla completa.

Answer 5

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

Frente a ese hecho, deberás probar cada hack de javascript sucio para forzar ese comportamiento.

La única razón por la que esto funciona para dispositivos Apple es el hecho de que Apple es muy restrictivo con respecto al desarrollo de un navegador personalizado y todos se apegan a la aplicación predeterminada.

Answer 6

Puede lograr esto con la nueva aplicación web progresiva de Google que agrega al trabajador del servicio. Eche un vistazo aquí: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ y https://developers.google.com/web/progressive-web-apps/ .

Puede agregar un icono en la pantalla de inicio para su aplicación web, obtener una pantalla completa, puede usar la notificación de inserción, etc.

Answer 7

Utilizo una combinación de la metaetiqueta HTML para iOS y una solución de JavaScript. Le quita la barra de direcciones en iOS y dispositivos Android. No elimina la barra inferior de iOS, ya que solo 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 back-end para renderizar JavaScript para el navegador móvil con la siguiente detección de navegador móvil

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

Answer 8

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

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

No confiaría en esto para trabajar con Android.

Para que la barra del navegador se desplace una vez que haya cargado su página, vea la respuesta a esta pregunta: Eliminar la barra de direcciones del navegador (para ver en Android)