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

Je veux changer la couleur de l'iOS 7 barre d'état dans Safari et Chrome. Je travaille sur une application web mobile et aimerait se sentir en natif et maintenant, je viens d'obtenir un blanc barre d'état.

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

OriginalL'auteur Edvard | 2013-09-28

  1. 13

    Je suis en utilisant ce alors que ios a le bug mentionné dans d'autres réponses.

    J'ai d'abord mis la barre de statut avec ceci:

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

    Pour moi, qui définit le texte blanc et un fond transparent. Il flotte aussi sur le contenu de mon.

    Puis j'ai le code 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é avec ios6 et il sera probablement briser une fois Apple corrige le bug. En outre, il semble un peu hors, lors du défilement vers le haut et l'effet de rebond se déplace de l'arrière-plan au-dessous de la barre d'état.

    Encore, c'est assez facile à corriger pour l'instant et surtout CSS.

    Vous pouvez jouer avec différentes couleurs, j'ai posté juste ceux que je suis en train d'utiliser. Essayez de changer l'arrière-plan du corps de la couleur à votre goût, essayez aussi de changer la couleur rvba pour la barre d'état.

    OriginalL'auteur Mikko Tapionlinna

  2. 7

    Mise à jour 3

    minimal-ui a été supprimé dans iOS 8 🙁 Plus d'infos ici:
    iOS 8 supprimé "minimal-ui" fenêtre de propriété, il existe d'autres "doux plein écran" solutions?

    Mise à jour 2

    Un autre bug apparaît maintenant dans iOS 7.1. Peu importe ce que content, et quelle que soit la page du background-color, la barre d'état est toujours translucide lorsque l'utilisateur a ajouté l'application web à l'écran d'accueil. Voir démo ici.

    Noter que iOS 7.1 a introduit une nouvelle balise minimal-ui, ce qui contribue à masquer le navigateur chrome Mobile Safari, mais ne fait rien lorsqu'il est ajouté à l'écran d'accueil. Plus de détails ici.

    Mise à jour

    Encore un bug dans 7.0.4.

    Il semble y avoir un bug de iOS 7.0.3.

    De ne pas avoir <meta name="apple-mobile-web-app-status-bar-style"> défini ou le définissant comme content="default" = fond noir avec texte en noir.

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

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

    Tout autre content valeur, tels que des white ne fonctionne pas et default comportement est exposé.

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

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

    Upvoting pour mettre en avant le comportement de "black-translucide". Type de frustrant car la lumière grise de l'en-tête couleur de fond est commun maintenant. En essayant de le tromper en pensant que le fond est blanc quand il fait gris clair, mais ne pas avoir beaucoup de chance.

    OriginalL'auteur Ray Shan

  3. 4

    J'ai été à la recherche d'un moyen de faire la même chose. Les seules options que j'ai vu jusqu'à présent sont en utilisant l'un de ces trois la balise meta dans le de votre document html.

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

    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    Cela rend la barre d'état en noir et pousse le contenu en dessous de la barre d'état.

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

    OriginalL'auteur Civilian

  4. -1

    Vous pouvez modifier la teinte de la barre du haut dans safari en changeant le corps de la couleur d'arrière-plan

    body { 
background-color: blue; /* la couleur */
background-image: linear-gradient(en bas, de vert 0%, vert 100%); /* pour le corps */
}

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

    Désolé, mais c'est tout simplement faux. Cela ne en raison de safari à la transparence, alors que la bonne façon de le faire est avec des balises meta-tags.

    OriginalL'auteur Patrick