Impossible de masquer les barres de navigation dans Safari iOS 7 pour iPhone / iPod touch
Je ne crois pas qu'il existe une solution pour masquer des barres à l'aide de javascript/css/html par programme, mais laissez-moi essayer de décrire un problème. Nous sommes l’équipe de développeurs de jeux mobiles et nous développons un jeu depuis un an.
Après l'annonce de iOS 7, nous avons rencontré le problème suivant: il est IMPOSSIBLE de masquer les barres de navigation. Une fois que l'utilisateur a appuyé sur la partie supérieure ou inférieure du navigateur Safari, les barres de navigation réapparaissent et masquent tous les contrôles de la partie.
La seule solution que nous avons trouvée jusqu'à présent consiste à forcer l'utilisateur à:
- Faire pivoter l'appareil
- Faire défiler la page
- Ajouter une application à l'écran d'accueil
Aucune de ces alternatives n'est acceptable. Cela ressemble à Apple est conscient de ce problème, mais ne l’ignore pas. Ils ont fermé un bogue signalé en tant que duplicata du bogue # 14076889.
Je crois que nous ne sommes pas la seule équipe à avoir le même problème. Est-ce que quelqu'un connaît la solution?
Mise à jour septembre 2014: iOS 8 a supprimé le minimal-ui fonctionnalité Il n’existe à nouveau aucun moyen de supprimer/masquer les barres de navigation autre que de s’appuyer sur le comportement par défaut du navigateur (les barres seront masquées lors du défilement, mais uniquement si l’élément de défilement est le BODY de la page ) La seule "solution de contournement" consiste à enregistrer l'application sur l'écran d'accueil et à définir les balises méta appropriées (voir ci-dessous).
Mise à jour août 2014: iOS 8 (version bêta) ne prend plus en charge minimal-ui. Il n'y a pas de solution de contournement. (La raison en est probablement due aux abus des sites Web qui l'utilisaient pour empêcher les gens de s'éloigner de la navigation. Cependant, de nouvelles fonctionnalités dans iOS 8 Safari n'ont pas encore été rendues publiques et remplacent minimal-ui.)
iOS 7.1 a ajouté une nouvelle API pour résoudre ce problème:
<meta name="viewport" content="minimal-ui">
Ce nouvel indicateur de fenêtre masque l’interface utilisateur Safari par défaut (seule une petite barre de titre avec un indicateur URL et SSL est affichée). Pour accéder à l’interface utilisateur Safari, les utilisateurs doivent appuyer activement sur cette barre de titre.
Notez que sur iOS 7.0.x, il n'y a pas d'API ni de solution connue pour cela. Dans ces versions, si vous souhaitez masquer le navigateur de Safari chrome de manière permanente, vous devez obliger l'utilisateur à ajouter l'application Web à l'écran d'accueil (avec les balises méta appropriées définies <meta name="Apple-mobile-web-app-capable" content="yes">) ou utilisez une sorte d’encapsuleur d’application native comme Phonegap et distribuez-le via l’App Store.
Personnellement, j'aurais aimé qu'ils n'aient pas supprimé le bouton "plein écran" qu'ils ont introduit en mode paysage sur iOS 6 Mobile Safari, ce qui était une excellente solution pour le bonheur des développeurs et des utilisateurs.
Un candidat idéal pour résoudre ce problème de manière plus permanente serait que Mobile Safari prenne en charge l'API plein écran HTML5 (prise en charge sur Safari sous OS X!). Hélas, il n’ya pas de support pour le moment et, historiquement, les versions ponctuelles d’iOS n’ont pas ajouté de nouvelles fonctionnalités de Safari.
[~ # ~] mise à jour [~ # ~] : Il existe une propriété méta permettant de corriger cela actuellement dans iOS7.1 Beta conformément à cet article du forum sur les notes de publication.
<meta name="viewport" content="minimal-ui">
J'ai effectué un test et je peux confirmer que cette fonctionnalité est actuellement en version bêta 2.
NOTE : La nouvelle option minimal-ui est une excellente solution, mais elle doit faire partie de la réponse HTML. J'ai essayé sur iOS7.1 beta3 d'ajouter la balise méta viewport avec JS
$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');
la valeur "minimal-ui" est ignorée par le navigateur.
Mise à jour: iOS7.1 est maintenant disponible, donc le NDA a été levé).
<meta name="viewport" content="minimal-ui">
Est en effet la balise correcte et fonctionne dans la version en direct. N'oubliez pas que "viewport" peut prendre en charge une liste séparée par des virgules si vous en avez besoin.
Je le combine avec d'autres variables mobiles pour que le site Web ressemble à 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-ci aussi. Nous avons un TabBar sur notre site et chaque fois que vous essayez de cliquer sur un contrôle de safari à onglets apparaît.
Aujourd'hui, j'espère. Si vous êtes membre du programme de développement Apple, je vous suggère fortement de visiter ce forum: https://devforums.Apple.com/message/927476
W
EDIT 2:
Ne fonctionne pas depuis iOS 7.1
EDIT:
Certains jeux ont adopté une superposition qui indique au joueur de faire défiler les barres , puis verrouille le défilement jusqu'à ce que les barres réapparaissent. Dans ce cas position: fixed aide beaucoup, car il stabilise le mouvement (je ne peux pas mieux l'expliquer, je dois juste l'essayer pour vous-même). Ce jeu est un bon exemple de cette approche:
www.paf.com/mobile/launch/flowers.html (désolé, impossible d'afficher plus de 2 liens)
Récemment, je suis également tombé sur un piratage qui désactive le déclenchement de la barre de navigation pour la zone supérieure. Tout ce que vous avez à faire est d’ajouter un élément aléatoire à votre DOM avec les styles suivants:
z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;
En savoir plus à ce sujet ici .
Si vous créez une application Web, vous pouvez créer un lien vers l'URL à partir de l'écran d'accueil. et utilisez les balises Meta HTML suivantes:
<!-- Allows fullscreen mode from the Homescreen -->
<meta name="Apple-mobile-web-app-capable" content="yes">
<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
Cela superposera les indicateurs sur votre en-tête/barre de navigation. (Les indicateurs que vous voyez sur tous les écrans d’iPad.
Pour plus d'informations, voir: https://developer.Apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Cette solution a fonctionné pour moi, mais dans mon cas, l'application Web était destinée à un public privé, où je contrôlais le périphérique Ipad utilisé.
J'ai essayé d'utiliser toutes les balises méta et tous les hacks possibles, et vraiment, après que IOS8 a supprimé la fonctionnalité minimal-ui, était pratiquement impossible à résoudre.
Sortant des sentiers battus, notre équipe a trouvé une solution intéressante:
Le navigateur Mercury s'ouvre en plein écran, et même lorsque les pages sont en cours de chargement, la barre d'adresse n'apparaît pas. Il s'agit d'une petite icône en bas à droite et uniquement :) Cela a parfaitement fonctionné pour notre problème!
Mais je répète: ne l'utilisez pas si vous développez une application Web pour le public en général. C'est terrible pour l'UX de forcer votre utilisateur à télécharger un navigateur différent pour accéder à l'application.
MISE À JOUR
Un de mes amis développeurs a proposé cette solution:
Utilisez une vue Web à l'intérieur de Titanium à partir d'appcelerator. Cela ne sera pas approuvé sur le magasin Apple), mais pour un événement privé, cela fonctionnera parfaitement!
Espérons que cela aide quelqu'un, mais je ne voulais pas régler la largeur de la fenêtre d'affichage = device-width .. car ses 480px sur iphone 4 .. et je veux que mon jeu soit à 800px pour tous les appareils.
Et si vous ne le définissez pas, alors minimal-ui ne s'enregistre pas.
Mon travail consiste à faire:
<meta name="viewport" content="width=device-width, minimal-ui">
Et puis changer la fenêtre d'affichage une fois la page chargée:
$(window).load(function(){
$('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
});
Je suis assez choqué que ça marche. La barre d'adresse et les boutons de l'interface utilisateur inférieure n'apparaissent que si l'utilisateur clique en haut/en bas de l'écran. Aime ça maintenant.