web-dev-qa-db-fra.com

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

Est-ce que quelqu'un sait 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?

javascriptandroidmobile
46
SixtySticks

Vous pouvez le faire avec le code suivant

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

J'espère que ça t'aide!

45
Carlos

Voici la solution NON-jQuery qui supprime instantanément la barre d’adresse sans défilement. En outre, cela fonctionne 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 également fonctionner avec l'iPhone, mais je n'ai pas pu tester cela.

32
Tim Eckel

Si vous avez chargé jQuery, vous pouvez voir si la hauteur du contenu est supérieure à la hauteur de la fenêtre. Sinon, vous pouvez le faire à 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 masquait 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);
  }

});
14
Volomike

En se référant à la réponse de Volomike , je suggérerais de remplacer la ligne 

nViewH -= 250;

avec 

nViewH = nViewH / window.devicePixelRatio;

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

10
Rafael Perelló

cela fonctionne sur Android (au moins sur le navigateur stock Gingerbread):

<body onload="document.body.style.height=(2*window.innerHeight-window.outerHeight)+'px';"></body>

plus loin si vous voulez désactiver le défilement, vous pouvez utiliser 

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

Le problème avec la plupart d'entre eux est que l'utilisateur peut toujours faire défiler vers le haut et voir la barre d'adresse . Pour apporter une solution permanente, vous devez également l'ajouter.

//WHENEVER the user scrolls
$(window).scroll(function(){
    //if you reach the top
    if ($(window).scrollTop() == 0)   
    //scroll back down  
    {window.scrollTo(1,1)}
})
1
user1869558

Celui ci-dessous fonctionne pour moi à chaque fois ..

Ce site propose également quelques autres suggestions, mais ce modèle simple est disponible dans un github: Gist et répond à votre question (collée ici pour plus de 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 );

Autant que je sache, la combinaison de hauteur supplémentaire ajoutée à la page (ce qui vous a posé problème) et de l'instruction scrollTo () fait disparaître la barre d'adresse.

Depuis 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); });

Cela cachera la barre d'adresse jusqu'à ce que l'utilisateur défile.

Ce site place la même méthode dans une fonction de délai d'attente (la justification n'est pas expliquée, mais il affirme 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);
});
1
Adam Huddleston

J'espère que cela aussi utile

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

Voici un exemple qui vérifie que le corps a une hauteur minimale de l'écran du périphérique et masque la barre de défilement. Il utilise l'événement DOMSubtreeModified, mais n'effectue la vérification que toutes les 400 ms afin d'éviter toute perte de performances.

var page_size_check = null, q_body;
(q_body = $('#body')).bind('DOMSubtreeModified', function() {
  if (page_size_check === null) {
    return;
  }
  page_size_check = setTimeout(function() {
    q_body.css('height', '');
    if (q_body.height() < window.innerHeight) {
      q_body.css('height', window.innerHeight + 'px');
    }
    if (!(window.pageYOffset > 1)) {
      window.scrollTo(0, 1);
    }
    page_size_check = null;
  }, 400);
});

Testé sur Android et iPhone.

0
JussiR