Application Web plein écran pour Android

Question

Je veux exécuter ma Web App, que j'ai programmée avec HTML5, en mode plein écran sur Android. (masquer la barre d'état et la barre d'adresse / de navigation)

pour iOS, vous écrivez uniquement:

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

Mais cela n'a pas fonctionné sur Android.

Il existe de nombreuses solutions avec Javascript, mais toutes les solutions que j'ai essayées ne fonctionnent pas.

Quelqu'un connaît la solution?

Answer 1

Cela a fonctionné pour moi sur Chrome pour Android.

Ajoutez ceci aux balises head:

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

Ensuite, dans le menu du navigateur Chrome, Aller à la page d'accueil. Cette icône ouvrira maintenant votre site Web en plein écran.

Answer 2

J'utilise un mélange de la balise meta HTML pour iOS et une solution JavaScript. Il supprime la barre d'adresse sur les appareils iOS et Android. Il ne supprime pas la barre inférieure sur iOS car cela ne disparaîtra que lorsque l'utilisateur installera la page Web en tant qu'application HTML5 sur son écran d'accueil.

 <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>
 

J'utilise PHP dans le backend pour rendre uniquement le JavaScript pour navigateur mobile avec la détection de navigateur mobile suivante

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

Answer 3

Je ne pense pas que vous trouverez une solution globale pour cela, car tout le monde n'utilise pas le navigateur Web Android par défaut (par exemple, je préfère Dolphin).

Face à ce fait, vous devrez essayer chaque hack javascript sale pour forcer ce comportement.

La seule raison pour laquelle cela fonctionne pour les appareils Apple est le fait qu'Apple est très restrictif quant au développement d'un navigateur personnalisé et que tout le monde s'en tient à l'application par défaut.

Answer 4

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

Cette balise est conçue pour afficher un environnement sans chrome après avoir ajouté votre site à l'écran d'accueil de l'iPhone.

Je ne compterais pas sur cela pour travailler pour Android.

Pour faire défiler la barre du navigateur une fois votre page chargée, voyez la réponse à cette question: Suppression de la barre d'adresse du navigateur (pour afficher sur Android)

Answer 5

Du côté Android et pour les versions inférieures au nid d'abeille , cela devrait être fait en utilisant:

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

Si le navigateur Android ne fait pas quelque chose comme ça quand il lit les méta-informations, j'essaierais de regarder dans Phonegap pour vérifier s'ils résolvent ce problème.