Que fait Apple-Mobile-Web-App-Status-Bar-Style?
Qu'est-ce que
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
est-ce que quelqu'un peut expliquer avec un exemple?
J'ai trouvé cette ligne dans la bibliothèque officielle de développement de Safari
Cette balise Méta n'a d'effet que si vous spécifiez d'abord le mode plein écran, comme décrit dans la section «URL».
Mais quelle URL?
Quel est l'avantage de cette balise méta?
Tout d'abord, l'indicateur Apple-mobile-web-app-capable doit être défini pour que cela fonctionne. Cette astuce permet à une application Web de s'exécuter en mode plein écran: elle supprime la barre d'adresse et les boutons de navigation que vous obtenez par défaut dans Mobile Safari. Les zones supprimées sont surlignées en rouge ici:
Ainsi, une fois qu'une application est en mode plein écran (l'utilisateur a ajouté le site Web à sa page d'accueil), vous pouvez également contrôler la couleur de la barre d'état dynamique restante en haut de la page avec Apple-mobile-web-app-status-bar-style, surligné en rouge ici. :
Selon les documents:
Si le contenu est défini sur
default, la barre d'état apparaît normale. Si défini surblack, la barre d'état est sur fond noir. Si défini àblack-translucent, la barre d'état est noire et translucide. S'il est défini par défaut ou noir, le contenu Web est affiché sous la barre d'état. Si défini surblack-translucent, le contenu Web est affiché sur tout l'écran, partiellement masqué par la barre d'état.
Quelques mises en garde:
Cela ne fonctionne que sur la première page que vous chargez; toute navigation vers une autre page fera réapparaître la barre d'adresse et les boutons de navigation. Donc, si vous voulez que cela fonctionne, vous devez créer un site Web d'une seule page (pour plusieurs "pages", envisagez une approche de chargement de page Ajax telle que celle utilisée dans le framework jQuery Mobile).
Cela ne fonctionne que lorsque vous arrivez sur la page Web via une icône de raccourci d'application; si vous accédez au site directement à partir de Mobile Safari, cela n’a aucun effet.
Il change la barre supérieure avec la bannière et le support et en fait un noir translucide.