web-dev-qa-db-fra.com

Applications Web plein écran HTML5: pas de barre de navigateur

Je suis en train de créer une application Web HTML5 pour les appareils mobiles et il m'a été demandé de masquer la barre de navigation nav du navigateur (les boutons Précédent/Suivant) (faute de frappe ici, préc.). Comment puis-je y arriver? 

Je pense que je devrais pouvoir y parvenir en utilisant Phone Gap. Mais je me demande s’il est possible pour une application web "normale" de masquer la barre de navigation? Je pense que c'est possible si je bloque le site Web/l'application sur l'écran d'accueil? 

iPhone a http://ajaxian.com/archives/iphone-full-screen-webapps , mais qu'en est-il d'Andriod au moins? 

html5mobile
11
Jiew Meng

Je sais que cette question est un peu dépassée à ce stade, voici donc une mise à jour:

Sur Safari pour iOS 7+, cette solution est excellente:

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

L'attribut minimal-ui force le navigateur à masquer tous les boutons tout en maintenant la barre des tâches intacte.

Je n'ai pas testé cela pour Android.

11
Sheldonbrax

Si vous pouvez utiliser JQuery dans votre application web, je vous conseillerais plutôt de choisir NiceScroll plugin.

Il peut être utilisé à la fois par les navigateurs mobiles et de bureau et masque les barres de défilement du navigateur. Si votre code dépasse la hauteur de la fenêtre du navigateur, il créera une barre de défilement personnalisée qui disparaîtra si elle n’est pas utilisée.

Voici sa démo .

Modifier:
Selon votre mise à jour, je voudrais ajouter que je ne suis pas un développeur d'applications web mobiles natif, mais en cherchant vos problèmes, j'ai trouvé quelques SO questions qui peuvent vous aider à ouvrir la voie:

Et ces tutoriels:

7
Asif

Vous pouvez utiliser cette application pour Android: Kiosk Web/Navigateur HTML , il crée un dossier dans votre carte SD où vous pouvez mettre le code HTML, affiché en plein écran "mode immersif".

1
fabiodipa

La dernière version bêta de Chrome pour Android offre cette fonction: https://developers.google.com/chrome/mobile/docs/installtohomescreen

0
Denes Papp

MODIFIER

Nouvelle réponse 

Beaucoup de choses ont changé depuis que cette question a été posée. Il existe maintenant un bon support natif pour le défilement, la position fixe, et la barre de navigation de la plupart des systèmes d’exploitation est beaucoup plus petite à l’époque. Puisque c'est le cas, je vous conseillerais de ne pas recourir à des hacks défilants, comme le recommandent la plupart des sites et réponses. Le respect des règles du système d'exploitation améliorera la stabilité, la convivialité et la compatibilité future de votre application Web.

Ancienne réponse

C'est possible pour l'iPhone quand quelqu'un l'enregistre en tant qu'application Web sur l'écran d'accueil. Cela fonctionne si vous ajoutez les balises méta appropriées.

Pour le mode de navigation standard, il est un peu plus délicat de vous remettre aux foutaises. Fondamentalement, la barre d'adresse disparaît lorsque vous faites défiler (pour Iphone et la plupart du temps pour Android). Vous pouvez simuler cela avec javascript. Mobile tuts a également un bon article à ce sujet: http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ , mais cela ne fonctionne que lorsque le contenu est plus long la résolution de l'écran.

0
Tosh
<script> function requestFullScreen() {

  var el = document.body;

  // Supports most browsers and their versions.
  var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
  || el.mozRequestFullScreen || el.msRequestFullScreen;

  if (requestMethod) {

    // Native full screen.
    requestMethod.call(el);

  } else if (typeof window.ActiveXObject !== "undefined") {

    // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");

    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}


</script>
<a href="#" onClick="requestFullScreen();"> click </a>
0
Cícero Alexandre Alves Lima