13 votes

Est-il possible de masquer la barre d'adresse et la barre d'état dans Safari sous iOS 7 ?

Est-il possible de masquer la barre d'adresse et la barre d'état dans iOS 7 ?

Dans une application en mode paysage, j'utilise actuellement le code ci-dessous pour les versions précédentes d'iOS et cela fonctionne bien, même sur IOS 7 : lorsque vous ouvrez la page, elle passe en plein écran et le reste.

JS :

window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

HTML :

<!-- For iOS web apps -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead Story Sync">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

Le fait est que sur les iPhone et iPad iOS 7, lorsqu'on touche le bas de l'écran, la barre d'adresse et la barre d'état apparaissent et la seule façon de s'en débarrasser est de changer l'orientation du téléphone puis de le remettre dans l'orientation précédente. Existe-t-il un moyen d'éviter cette manipulation ?

16voto

Leftium Points 414

Il y a une méthode : <meta name="viewport" content="minimal-ui”>
( mais cela ne fonctionne que sur iOS 7.1 - pas sur 7.0 ni 8.0 )

source : StackOverflow


Plus de détails, à partir de Journal des modifications et notes de mise à jour de la version bêta 2 d'iOS 7.1 :

Notes de Safari

Une propriété, minimal-ui, a été ajoutée pour la clé de métabalise viewport qui permet de minimiser les barres supérieure et inférieure de l'iPhone lors du page se charge. Lorsque vous êtes sur une page utilisant minimal-ui, le fait d'appuyer sur la barre supérieure fait revenir les barres. Si vous appuyez sur le contenu, elles disparaissent à nouveau.

Par exemple, utilisez <meta name=”viewport” content=”width=1024, minimal-ui”> .


mettre à jour : J'ai confirmé que cette méthode fonctionne dans iOS 7.1 (version finale officielle). Vous pouvez confirmer par vous-même avec mon application web qui utilise la solution des métabalises décrite ci-dessus.

enter image description here

1voto

Cameron Points 31

J'ai vu cette recommandation <meta name="apple-mobile-web-app-capable" content="yes"> Il fait fonctionner le site en mode autonome, ce qui masque l'interface utilisateur. Je ne vois pas très bien comment cela se compare à la solution "minimal-ui" ci-dessus. J'ai l'impression que cette solution fonctionne également pour les versions d'iOS antérieures à 7.1.

LesApples.com

LesApples est une communauté de Apple où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres utilisateurs d'appareils Apple, poser vos propres questions ou résoudre celles des autres.

Powered by:

X