Supprimer la barre d'adresse du navigateur (pour l'afficher sur Android)

Question

Quelqu'un sait-il comment je peux supprimer la barre d'adresse du navigateur Android pour mieux visualiser mon application web et la faire ressembler davantage à une application native ?

Answer 1

Vous pouvez le faire avec le code suivant

 if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

J'espère que cela vous aidera !

Answer 2

Voici la solution NON-jQuery qui supprime instantanément la barre d'adresse sans défilement. Elle fonctionne également lorsque vous faites pivoter l'orientation du navigateur.

function hideAddressBar(){
  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
  setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});

Cela devrait aussi fonctionner avec l'iPhone, mais je n'ai pas pu le tester.

Answer 3

Si vous avez chargé jQuery, vous pouvez voir si la hauteur du contenu est supérieure à la hauteur du viewport. Si ce n'est pas le cas, vous pouvez lui donner cette hauteur (ou un peu moins). J'ai exécuté le code suivant en mode WVGA800 dans l'émulateur Android, puis je l'ai exécuté sur mon Samsung Galaxy Tab, et dans les deux cas, il a masqué la barre d'adresse.

$(document).ready(function() {

  if (navigator.userAgent.match(/Android/i)) {
    window.scrollTo(0,0); // reset in case prev not scrolled  
    var nPageH = $(document).height();
    var nViewH = window.outerHeight;
    if (nViewH > nPageH) {
      nViewH -= 250;
      $('BODY').css('height',nViewH + 'px');
    }
    window.scrollTo(0,1);
  }

});

Answer 4

Se référant à La réponse de Volomike je suggérerais de remplacer la ligne

nViewH -= 250;

avec

nViewH = nViewH / window.devicePixelRatio;

Il fonctionne exactement comme je le vérifie sur un HTC Magic (PixelRatio = 1) et un Samsung Galaxy Tab 7" (PixelRatio = 1.5).

Answer 5

Celui ci-dessous fonctionne pour moi à chaque fois

Ce site propose également quelques autres suggestions, mais celle-ci, qui n'a pas de sens, est disponible dans un github:gist et répond à votre question (collée ici par commodité) :

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

Pour autant que je sache, la combinaison de la hauteur supplémentaire ajoutée à la page (qui vous a causé des problèmes) et de l'instruction scrollTo() fait disparaître la barre d'adresse.

Sur le même site, la solution la plus simple pour masquer la barre d'adresse consiste à utiliser la méthode scrollTo() :

window.addEventListener("load", function() { window.scrollTo(0, 1); });

La barre d'adresse sera ainsi masquée jusqu'à ce que l'utilisateur la fasse défiler.

Ce site place la même méthode à l'intérieur d'une fonction de temporisation (la justification n'est pas expliquée, mais il est dit que le code ne fonctionne pas bien sans elle) :

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
     window.scrollTo(0, 1);
  }, 0);
});