Toolbar in Chrome für Android einfärben

Toolbar in Chrome für Android einfärben

Es wird wahrscheinlich aufgefallen sein, dass manche Browserfenster auf Android seit einigen Monaten überraschend bunt sind. Das ist möglich seit Chrome 39 für Android, weil in dieser Version ein neuer Meta-Tag vorgestellt worden ist.

<meta name="theme-color" content="#123456">

Mit dem theme-color Meta-Tag kann man die Status- und Adressleiste einfärben, wie man in den Screenshots oben sehen kann.

Auf iOS funktioniert der Meta-Tag nicht, da kann man nur einstellen wie die Statusleiste im Fullscreen-Modus aussieht.

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

Damit man die Darstellung der Statusleiste in iOS ändern kann, muss die Website im Fullscreen-Modus sein, deswegen werden beide Meta-Tags benötigt. Eigene Farben kann man nicht angeben, man hat nur die Wahl zwischen default, black und black-translucent.

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *