it-swarm.com.de

Ändern Sie die Farbe der iOS 7-Statusleiste in Safari und Chrome

Ich möchte die Farbe der iOS 7-Statusleiste in Safari und Chrome ändern. Ich arbeite an einer mobilen Web-App und möchte, dass sie sich nativ anfühlt und im Moment bekomme ich nur eine weiße Statusleiste.

What I want to change

16
Edvard

Ich verwende dies, während ios den Fehler in anderen Antworten erwähnt hat.

Zuerst setze ich die Statusleiste damit:

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

Für mich wird der Text weiß und der Hintergrund transparent. Es schwebt auch über meinen Inhalt.

Dann habe ich folgende Css:

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

Bei diesem Ansatz habe ich einen dunklen Hintergrund in meiner Statusleiste mit etwas Transparenz. 

Ich habe dies nicht mit ios6 getestet und wird wahrscheinlich brechen, sobald Apple den Fehler behoben hat. Wenn Sie nach oben scrollen, sieht es auch ein wenig ab und der Bounce-Effekt verschiebt den Hintergrund unter der Statusleiste.

Trotzdem ist es jetzt ziemlich einfach zu beheben und meistens CSS.

13

Update 3

minimal-ui wurde in iOS 8 entfernt :( Weitere Informationen hier: In iOS 8 wurde die Viewport-Eigenschaft "minimal-ui" entfernt. Gibt es andere "soft fullscreen" -Lösungen?

Update 2

Ein anderer Fehler tritt jetzt in iOS 7.1 auf. Unabhängig von der Einstellung von content und unabhängig von background-color der Seite ist die Statusleiste immer transparent, wenn der Benutzer die Web-App zum Startbildschirm hinzufügt. Siehe Demo hier .

Beachten Sie, dass iOS 7.1 ein neues Tag namens minimal-ui eingeführt hat, mit dem der Browser-Chrome in Mobile Safari ausgeblendet werden kann, er wird jedoch nicht zum Startbildschirm hinzugefügt. Mehr Detail hier .

Aktualisieren

Immer noch ein Fehler in 7.0.4.


Ab iOS 7.0.3 scheint ein Fehler aufgetreten zu sein.

Sie haben <meta name="Apple-mobile-web-app-status-bar-style"> nicht definiert oder als content="default" = schwarzen Hintergrund mit schwarzem Text definiert.

content="black" = schwarzer Hintergrund mit weißem Text.

content="black-translucent" = schwarzer Hintergrund mit weißem Text, wenn der Hintergrund der Leinwand nicht reinweiß ist (FFF). Oder lichtdurchlässiger Hintergrund mit schwarzem Text, wenn der Hintergrund weiß ist.

Jeder andere content-Wert wie white funktioniert nicht und default-Verhalten wird angezeigt.

enter image description here

Bestätigt durch diese Referenz: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

7
Ray Shan

Ich habe nach einem Weg gesucht, das Gleiche zu tun. Die einzigen Optionen, die ich bisher gesehen habe, beinhalten die Verwendung eines dieser drei Meta-Tags in Ihrem HTML-Dokument. 

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

<meta name="Apple-mobile-web-app-status-bar-style" content="black"> Dadurch wird die Statusleiste schwarz und der Inhalt wird unter die Statusleiste verschoben. 

<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">.__: Dadurch wird der Inhalt hinter der Statusleiste angezeigt. 

4
Civilian

Sie können den Farbton der oberen Leiste in Safari beeinflussen, indem Sie die Hintergrundfarbe des Körpers ändern

Karosserie {
 Hintergrundfarbe: blau;/* für den Farbton */
 Hintergrundbild: linearer Gradient (nach unten, grün 0%, grün 100%); /* für den Körper */
}

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

0
Patrick