web-dev-qa-db-fra.com

Modifier la couleur de la barre d'état iOS 7 dans Safari et Chrome

Je souhaite modifier la couleur de la barre d'état iOS 7 dans Safari et Chrome. Je travaille sur une application Web mobile et j'aimerais qu'elle se sente native et, pour le moment, une barre d'état blanche s'affiche.

What I want to change

iphonemobilemobile-safariios7mobile-website
16
Edvard

J'utilise cela alors qu'ios a le bogue mentionné dans d'autres réponses.

D'abord, je configure la barre d'état avec ceci:

<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">

Pour moi, le texte est blanc et l’arrière-plan transparent. Il flotte aussi sur mon contenu.

Ensuite, j'ai le css suivant:

body{
    background:#dddddd;
}
body:before{
    display: block;
    content: " ";
    height:20px;
    top: 0;
    background:rgba(0,0,0,0.8);
    position:-webkit-sticky;
    position:sticky;
}

Avec cette approche, j'ai un arrière-plan sombre sur ma barre de statut avec une certaine transparence. 

Je n'ai pas testé cela avec ios6 et il sera probablement cassé une fois que Apple corrigera le bogue. En outre, il semble un peu éteint lors du défilement vers le haut et l'effet de rebond déplace l'arrière-plan en dessous de la barre d'état.

Pourtant, c'est une solution assez facile pour l'instant et principalement CSS.

13
Mikko Tapionlinna

Mise à jour 3

minimal-ui a été supprimé dans iOS 8 :( Plus d’informations ici: iOS 8 a été supprimé de la propriété de fenêtre de visualisation "minimal-ui". Existe-t-il d’autres solutions "en plein écran"?

Mise à jour 2

Un autre bogue apparaît maintenant dans iOS 7.1. Peu importe la valeur définie pour content et quel que soit le background-color de la page, la barre d'état est toujours translucide lorsque l'utilisateur ajoute l'application Web à l'écran d'accueil. Voir la démo ici .

Notez qu'iOS 7.1 a introduit un nouveau tag appelé minimal-ui, qui permet de masquer le chrome du navigateur dans Mobile Safari, mais ne fait rien lorsqu'il est ajouté à l'écran d'accueil. Plus de détails ici .

Mettre à jour

Encore un bug dans 7.0.4.

Il semble y avoir un bogue à partir de iOS 7.0.3.

N'ayant pas défini <meta name="Apple-mobile-web-app-status-bar-style"> ou le définissant comme content="default" = fond noir avec texte noir.

content="black" = fond noir avec du texte blanc.

content="black-translucent" = arrière-plan noir avec du texte blanc si l'arrière-plan de la toile n'est pas blanc pur (FFF). Ou un fond translucide avec du texte noir si le fond est blanc.

Toute autre valeur content telle que white ne fonctionne pas et le comportement default est affiché.

enter image description here

Confirmé par cette référence: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

7
Ray Shan

Je cherchais un moyen de faire la même chose. Les seules options que j'ai vues jusqu'à présent impliquent l'utilisation de l'une de ces trois balises méta dans le document HTML. 

<meta name="Apple-mobile-web-app-status-bar-style" content="default">

<meta name="Apple-mobile-web-app-status-bar-style" content="black"> La barre d'état devient noire et le contenu est placé sous la barre d'état. 

<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent"> Cela fait que le contenu passe derrière la barre d'état. 

4
Civilian

Vous pouvez modifier la teinte de la barre supérieure lors d’un safari en modifiant la couleur de fond du corps.

 corps {
 couleur de fond: bleu;/* pour la teinte */
 image d'arrière-plan: dégradé linéaire (jusqu'en bas, vert 0%, vert 100%);/* pour le corps */
}

via http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

0
Patrick