web-dev-qa-db-fra.com

Masquer la barre d'adresse dans le navigateur de l'appareil mobile

Je connais une façon de procéder.

<body onload="setTimeout(function() {window.scrollTo(0, 1)}, 100)">
...
</body>

Mais cela ne fonctionne que si la page est suffisamment grande pour être défilée. Si la page correspond à l'écran, la fonction ci-dessus ne fonctionnera pas. Comment masquer la barre d'adresse dans ce cas? Je dois le faire fonctionner avec l'iphone, l'ipad, les appareils Android.

htmlcssmobile-safarimobile-website
25
Prabhat

Vous pouvez peut-être régler la hauteur minimale sur le corps plus grand. 480px hauteur de l'écran en mode vertical + 60px hauteur de la barre d'adresse = 540px.

Exemple:

body { min-height:540px; }     
body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }
18
Tom Claus

iPhone:

Fonctionne uniquement si "l'application" mobile est ajoutée à l'écran d'accueil (via l'icône plus -> ajouter à l'écran d'accueil)

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

Je n'ai aucune expérience avec d'autres OS mobiles, mais une recherche rapide sur Google pour masquer la barre d'URL du navigateur Android a abouti à une solution similaire à la vôtre, avec un window.scrollTo.

16
sanderd

de http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ j'ai trouvé

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); 
        document.body.style.height = 'auto'; 
      }, 50 );
  }
}

Un peu modifié

fonctionne assez bien dans certains navigateurs, mais au moins je ne peux pas le faire fonctionner Android Chrome.

1
petter