Impossible de masquer les barres de navigation de Safari iOS 7 pour iPhone/iPod touch

Question

Je ne crois pas qu'il existe une solution pour masquer les barres par programmation à l'aide de javascript/css/html, mais je vais essayer de décrire un problème. Nous sommes l'équipe mobile de développeurs de jeux et nous avons été le développement d'un jeu pour un an.

Après iOS 7 annonce que nous avons été confrontés au problème qu'il est IMPOSSIBLE de cacher les barres de navigation. Une fois que l'utilisateur appuie dans la partie supérieure ou la partie inférieure du navigateur Safari, les barres de navigation sont en train d'apparaître de nouveau et masquer tous les contrôles du jeu.

La seule solution que nous avons trouvée est de forcer l'utilisateur à:

1. Faites pivoter l'appareil
2. Faites défiler la page
3. Ajouter une application à l'Accueil de l'écran

Aucune de ces solutions n'est acceptable. Il ressemble à Apple est conscient de ce problème, mais garde le silence. Ils ont fermé un rapport de bogue comme un double de la bogue #14076889.

Je crois que nous ne sommes pas la seule équipe qui vivent le même problème. Quelqu'un sait-il la solution?

Answer 1

Mise à jour septembre 2014: iOS 8 a supprimé l' minimal-ui fonction Il n'y a encore aucun moyen de supprimer/masquer les barres de navigation autres que de se baser sur le comportement par défaut du navigateur (barres seront cachés lors du défilement, mais seulement si le défilement de l'élément est l' BODY de la page). La seule "solution" est de sauver de l'application à l'écran d'accueil et les bonnes balises meta (voir ci-dessous).

Mise à jour août 2014: iOS 8 (bêta) ne prend plus en charge minimal-ui. Il n'y a pas de solution de contournement. (La raison pour cela est probablement dû à l'abus par les sites web qui l'a utilisé pour essayer d'empêcher les gens de naviguer à l'extérieur, même si il peut y avoir de nouvelles fonctionnalités dans iOS 8 Safari qui n'ont pas été rendus publics mais qui remplacent minimal-ui.)

iOS 7.1 ajout d'une nouvelle API pour résoudre ce problème:

<meta name="viewport" content="minimal-ui">

Cette nouvelle fenêtre d'affichage du drapeau cache le Safari de l'INTERFACE utilisateur par défaut (seulement une petite barre de titre avec l'URL et SSL indicateur sont présentés). Pour accéder au Safari de l'INTERFACE utilisateur, les utilisateurs doivent activement appuyez sur cette barre de titre.

Notez que sur iOS 7.0.x, il n'y a pas d'API ou de solution connue pour cela. Dans ces versions, si vous voulez cacher Safari est le navigateur chrome de façon permanente, vous devez soit obtenir à l'utilisateur d'ajouter l'application web à l'écran d'accueil (avec les balises meta ensemble <meta name="apple-mobile-web-app-capable" content="yes">) ou d'utiliser une sorte d'application native wrapper comme Phonegap et distribuer via l'App Store.

Personnellement, je souhaite qu'ils n'avaient pas enlevé le bouton "full screen" ils ont introduit en mode paysage sur iOS 6 Mobile Safari, qui est une excellente solution qui a fait de développeurs et d'utilisateurs heureux.

Un candidat parfait pour que cela soit résolu de façon plus permanente serait pour le navigateur Safari Mobile à l'appui de l'HTML5 plein écran de l'API (qui est pris en charge sur Safari sur OS X!). Hélas, il n'y a pas de soutien dès maintenant et historiquement iOS point de communiqués de ne pas ajouter de nouvelles fonctionnalités de Safari, donc c'est peut-être quelque chose pour iOS 8.

Answer 2

Mise à jour: il y a une propriété meta pour résoudre cela actuellement en iOS7.1 Beta selon ce post sur le forum sur les notes de version.

J’ai couru un test et peut confirmer que cette fonctionnalité est actuellement en version bêta 2.

Answer 3

NOTE: la nouvelle option minimale-ui est une excellente solution, mais il doit faire partie de la réponse HTML. J’ai essayé sur iOS7.1 beta3 ajouter la balise meta viewport JS

``

la valeur « minime-ui » est ignorée par le navigateur.

Answer 4

Mise à jour: iOS7.1 a été libéré de sorte que le NDA a été levé.

<meta name="viewport" content="minimal-ui">

Est effectivement la bonne étiquette et travaille à la libération en direct. Rappelez-vous que "viewport" peut soutenir une liste séparée par des virgules si vous avez besoin d'.

Je le combiner avec d'autres mobiles de variables pour faire le site web se sentir comme une application:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

Nous avons eu du mal avec celui-là aussi. Nous avons un TabBar sur notre site et à chaque fois que vous essayez de cliquer sur un onglet safari contrôles de pop-up.

Aujourd'hui l'espoir. Si vous êtes un membre de l'apple developer program, je suggère fortement de visiter ce forum: https://devforums.apple.com/message/927476

W

Answer 5

EDIT 2:

Ne fonctionne pas depuis iOS 7.1

EDIT:

Certains jeux ont adopté une superposition qui laisse le joueur de défilement les barres et puis verrouille le défilement jusqu'à ce que les barres de sortir de nouveau. Dans ce cas - position: fixed aide beaucoup, qu'il stabilise le mouvement (ne peut pas l'expliquer mieux, suffit de l'essayer pour vous-même). Ce jeu est un bon exemple de cette approche:

www.paf.com/mobile/launch/flowers.html (désolé, ne peut pas poster plus de 2 liens)

Récemment, j'ai aussi tombé sur un hack qui désactive la barre de navigation de déclenchement pour la zone supérieure. Tout ce que vous avez à faire est d'ajouter un élément aléatoire à votre DOM avec des styles suivants:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

Lire plus à ce sujet ici.