web-dev-qa-db-fra.com

Comment masquer la barre d'adresse d'un navigateur mobile?

Safari et Chrome sur les appareils mobiles incluent tous deux une barre d’adresse visible lors du chargement d’une page. Lorsque le body de la page défile, ces navigateurs font défiler la barre d’adresse de l’écran pour donner plus de biens immobiliers sur le site Web, comme indiqué dans cette image:

Note the missing Address bar in the right image

Je rencontre un problème avec mon site qui permet cela. Je travaille sur un Pokedex qui contient une très longue liste de tous les Pokémon. Cependant, avec la façon dont j'ai configuré la page, il ne veut pas faire défiler la barre d'adresse à l'abri des regards.

Note that by scrolling the address bar is still visible

Mon html ressemble à:

<body>
  <app> <!-- My Angular2 tag for the app, no special styles for this -->
    <nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap -->
    <div class="fluid-container">...</div> <!-- The container for all pokemon entries -->
  </app>
</body>

Si je fais défiler vers le bas absolu de la liste (721 entrées), tout défilement supplémentaire déplacera la barre d'adresse en haut de l'écran. Si je touche la barre de navigation et que je la fais glisser vers le haut, la barre d'adresse disparaît de l'écran. Ces deux méthodes ne semblent pas être intuitives.

J'imagine qu'il y a un moyen de faire défiler le corps de la page à l'aide de javascript qui le cachera mais ce que j'ai essayé jusqu'à présent ne fonctionne pas. Aucun défilement visible n'a eu lieu quand j'ai fait cela.

Comment faire défiler la page suffisamment pour masquer la barre d'adresse d'un navigateur mobile peu après le chargement de la page?

EDIT: Plus j'étudie cela, plus il semble impossible de le faire sans interaction de l'utilisateur. Si j'ai besoin d'une interaction de l'utilisateur, serait-il possible que le contact de l'utilisateur situé au centre de l'écran tente de faire défiler le corps avant d'essayer de faire défiler le div avec toutes les entrées qu'il contient? Si cela fonctionne comme je le pense, la barre d’adresse sera d'abord glissée avant de glisser dans la liste. C'est en quelque sorte l'inverse du comportement par défaut du navigateur, de sorte que ce n'est peut-être pas possible/facile/fiable, mais je suis disposé à essayer de voir si quelqu'un a des idées.

javascriptmobile-browseraddress-bar
26
Corey Ogburn

Je sais que c'est vieux, mais je dois ajouter ceci ici ..

Et bien que ce ne soit pas une réponse complète, c’est un "en plus"

La barre d'adresse ne disparaîtra pas si vous n'utilisez pas https.

AUSSI

Si vous utilisez https et que la barre d'adresse ne se cache toujours pas, il se peut que votre page Web contienne des erreurs https (par exemple, certaines images sont diffusées à partir d'un emplacement autre que https.)

J'espère que cela t'aides..

13
Tony

Jetez un coup d’œil à cet article HTML5 Rocks - http://www.html5rocks.com/en/mobile/fullscreen/ Vous pouvez utiliser JS ou l’API Fullscreen (meilleure option IMO) ou en ajouter. métadonnées à la tête pour indiquer que la page est une webapp

8
Ant Kennedy

Cela devrait être le code dont vous avez besoin pour masquer la barre d'adresse:

window.addEventListener("load",function() {
    setTimeout(function(){
        // This hides the address bar:
        window.scrollTo(0, 1);
    }, 0);
});

Aussi agréable à la recherche Pokedex par le chemin! J'espère que cela t'aides!

4
NiallMitch14

Le moyen le plus simple d’archiver la barre d’adresse du navigateur masquée lors du défilement est d’ajouter "display": "standalone", à manifest.json fichier.

3
Mārcis P