web-dev-qa-db-fra.com

Comment masquer complètement la barre de navigation dans iPhone / HTML5

Je suis vraiment nouveau sur HTML5 pour mobile. J'utilise jQuery Mobile pour mon application actuelle et j'ai des problèmes pour masquer la barre de navigation.

J'ai trouvé ce site: http://m.somethingborrowedmovie.warnerbros.com/ . (Je ne colle pas ce lien pour promouvoir le film.)

J'ai été juste étonné par ce site HTML5. Quelqu'un a-t-il une idée de la méthode utilisée pour masquer la barre de navigation?

Le menu est également très bien fait. Existe-t-il un cadre pour créer des applications comme celle-ci?

html5mobileiphone-standalone-web-app
26
Luc

Essayez ce qui suit:

  1. Ajoutez cette balise meta dans le head de votre fichier HTML:

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

  2. Ouvrez votre site avec Safari sur iPhone et utilisez la fonction de signet pour ajouter votre site à l'écran d'accueil.

  3. Revenez à l'écran d'accueil et ouvrez le site marqué d'un signet. L'URL et la barre d'état auront disparu.

Tant que vous n'avez besoin que de travailler avec l'iPhone, cette solution devrait vous convenir.

De plus, votre échantillon sur le site warnerbros.com utilise le Sencha touch framework . Vous pouvez Google it pour plus d'informations ou consultez leurs démos .

59
Minh Le

Remy Sharp a une bonne description du processus dans son article "Faire les choses correctement: sauter la barre d'URL de l'iPhone" :

Faire en sorte que l'iPhone masque la barre d'url est assez simple, vous devez exécuter le code JavaScript suivant:

window.scrollTo(0, 1);

Cependant, il y a la question de quand? Vous devez le faire une fois que la hauteur est correcte afin que l'iPhone puisse faire défiler jusqu'au premier pixel du document, sinon il essaiera, puis la hauteur se chargera, forçant la barre d'URL à revenir en vue.

Vous pouvez attendre que les images soient chargées et que l'événement window.onload se déclenche, mais cela ne fonctionne pas toujours, si tout est mis en cache, l'événement se déclenche trop tôt et le scrollTo n'a jamais la chance de sauter. Voici un exemple utilisant window.onload: http://jsbin.com/edifu4/4/

Personnellement, j'utilise une minuterie pendant 1 seconde - ce qui est assez de temps sur un appareil mobile pendant que vous attendez pour le rendu, mais suffisamment longtemps pour qu'il ne se déclenche pas trop tôt:

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

Cependant, vous ne voulez que cela se configure si c'est un navigateur iPhone (ou simplement mobile), donc un reniflement sournois (je n'encourage généralement pas cela, mais je suis à l'aise avec cela pour empêcher les navigateurs de bureau "normaux" de sauter d'un pixel ):

/mobile/i.test(navigator.userAgent) && setTimeout(function
() {   window.scrollTo(0, 1); }, 1000);

La toute dernière partie de cela, et c'est la partie qui semble manquer dans certains exemples que j'ai vus sur le Web est la suivante: si l'utilisateur est spécifiquement lié à un fragment d'URL, c'est-à-dire que l'URL a un hachage, vous ne veux pas sauter. Donc, si je navigue vers http://full-frontal.org/tickets#dayconf - je veux que le navigateur défile naturellement jusqu'à l'élément dont l'id est dayconf, et ne saute pas vers le haut en utilisant scrollTo ( 0, 1):

/mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () {   window.scrollTo(0, 1); }, 1000);​

Essayez ceci sur un iPhone (ou un simulateur) http://jsbin.com/edifu4/1 et vous verrez qu'il ne défilera que lorsque vous aurez atterri sur la page sans fragment d'URL.

34
bnabilos

Le problème avec toutes les réponses données jusqu'à présent est que sur le site quelque chose d'emprunté, la barre Mac reste totalement cachée lors du défilement vers le haut, si vous utilisez simplement la solution scrollTo puis l'utilisateur fait défiler vers le haut, la barre de navigation est révélée à nouveau, elle semble que le site entier se trouve à l'intérieur d'une div avec défilement, de sorte qu'au lieu de faire défiler la page, il ne défile qu'à l'intérieur de la div et conserve la barre de navigation cachée. La seule façon de révéler la barre de navigation est de toucher le haut de l'écran.

1
EmmaGamma