Masquage des composants de l'interface utilisateur Safari sur iPhone
Tentative de masquage des composants de l’interface utilisateur Safari pour une application Web marquée comme icône d’écran d’accueil. J'utilise cette balise META
<meta name="Apple-mobile-web-app-capable" content="yes" />
comme spécifié sur iPhone Dev Center mais la barre d'adresse et la barre d'outils sont toujours présentes lors du lancement à partir de l'icône de l'écran d'accueil. Que dois-je faire différemment? Quelqu'un a-t-il un exemple?
window.top.scrollTo(0, 1);
Fonctionne sur iPhone, mais pas sur iPad. J'ai réussi à masquer les composants du navigateur sur iPad (probablement partout) en utilisant
<meta name="Apple-mobile-web-app-capable" content="yes" />
et lancer à partir d'un lien vers l'écran d'accueil. J'utilise aussi
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Je n'ai pas essayé de voir si les composants du navigateur sont toujours masqués si je laisse de côté les propriétés de la fenêtre d'affichage.
Est-il lancé depuis l'écran d'accueil? La documentation sur la page liée ne mentionne pas mais j'ai trouvé ceci @ Configuration d'applications Web :
Par exemple, vous pouvez spécifier une icône pour votre application Web utilisée pour la représenter lorsqu'elle est ajoutée à l'écran d'accueil, comme décrit dans la section «Spécification d'une icône de page Web pour Web Clip». Vous pouvez également réduire l'interface utilisateur de Safari sur iPhone, comme décrit dans les sections «Modification de l’apparence de la barre d’état» et «Masquage des composants de l’interface utilisateur Safari», lorsque votre application Web est lancée à partir de l'écran d'accueil. Ce sont tous des paramètres facultatifs qui, une fois ajoutés à votre contenu Web, sont ignorés par d'autres plateformes.
Avez-vous essayé d'ajouter ...
<meta name="Apple-touch-fullscreen" content="yes" />
D'après ce que je peux dire, iOS ne prête attention aux drapeaux que lorsque vous ajoutez réellement l'application. Si l'application Apple-mobile-Web-App compatible ne fonctionne pas au début, essayez de supprimer votre application de l'écran d'accueil, puis de l'ajouter à nouveau.
J'ai couru des expériences et trouvé:
- l'emplacement de la balise méta dans les en-têtes ne semble pas avoir d'importance (je pensais que ça pourrait l'être!)
- après avoir ajouté l'application et l'avoir supprimée correctement, si vous supprimez les balises méta de la page Web, iOS continue de supprimer la barre d'outils.
- même après le redémarrage de l'appareil, il «se souvient» toujours de l'opportunité de supprimer la barre d'outils. La seule façon que j'ai trouvée de réinitialiser ce comportement est de supprimer et d'ajouter de nouveau l'application.
J'espère que cela pourra aider!
Je sais que c'est assez vieux, mais je l'ai trouvé en cherchant une solution. J'ai pu résoudre ce problème en ajoutant également:
window.top.scrollTo(0, 1);
à la méthode de surcharge du corps. J'espère que cela aidera les autres à venir à ce sujet.
Essaye ça
<meta name="Apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
<link rel="Apple-touch-icon" href="icon.png">
Il existe une nouvelle directive, appelée "minimal-ui", que le navigateur iOS prend en compte (au moins sur l'iPhone où j'ai testé). Les barres d'outils sont masquées jusqu'à ce que l'utilisateur clique sur la barre d'état en haut. Très bien pour les applications d'une page!
Voici l'extrait que j'utilise:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
Depuis iOS 7.1, vous pouvez utiliser minimal-ui
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<meta name="Apple-mobile-web-app-capable" content="yes" />
Cela fonctionnera si:
- La balise existe lorsque l'application est ajoutée à l'écran d'accueil.
- L'application est lancée à partir de l'écran d'accueil.
toutes les balises méta et window.scrollTo ci-dessus, ne fonctionnaient pas sur ipad pour moi, J'ai trouvé un bouton sur safari à côté des signets où vous obtenez une option appelée "Ajouter à l'écran d'accueil" qui crée une nouvelle icône de tuile, et vous pouvez lancer votre application Web comme une application native, sans barre d'adresse.
<meta name="Apple-mobile-web-app-capable" content="yes" />
fonctionne sur le navigateur Safari Mobile pour iOS6 +, mais UNIQUEMENT si vous avez ajouté la page à votre écran d'accueil APRÈS que vous ayez inclus la balise méta sur votre site.
Cela devrait en effet se comporter comme prévu, je l'ai utilisé dans le passé sans aucune difficulté.