In mobilen Browsern unter iOS, Android und Windows ist es möglich, die Browserzeile farblich an das Design der Website anzupassen. Dazu benötigst Du nur ein paar Zeilen im HTML-Header. Und mit einer weiteren Zeile wird Deine Seite zur Web-App.
Mir war bisher gar nicht klar, dass sich die Browser nicht einfach nur eine Farbe aus dem CSS einer Website heraus greifen, um die Browserzeile anzupassen. Mir ist einfach nicht aufgefallen, dass das gar nicht bei allen Seiten passiert. Eine Frage auf Facebook hat mich erst darauf gebracht, dass man dafür etwas tun kann. Dort gab es auch den Link zur Lösung:
<!-- Für Chrome, Opera und Firefox --> <meta name="theme-color" content="#9E8A69"> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#9E8A69"> <!-- Safari --> <meta name="apple-mobile-web-app-status-bar-style" content="#9E8A69">
Natürlich gibt es mal wieder keinen Browser-übergreifenden Standard dafür. Apple und Microsoft drehen ihr eigenes Ding. Mit diesen drei Meta-Tags aber kannst Du die verschiedenen Browser dazu bringen, die gewünschte Farbe anzunehmen.
Website als Web-App
Und dann gab es in dem Beitrag bei StackOverflow noch die Lösung für eine weitere Frage, die ich mir kürzlich gestellt habe: Auf meinem Raspberry Pi läuft Volumio als Medien-Center. Volumio wird gesteuert über eine Website.
Ich hatte mir den Link zu der URL neulich „Auf die Startseite“ meines Telefons gelegt, um schnell mal ein Lied weiter schalten zu können, ohne erst groß den Browser aufzurufen. Wenn ich auf das Icon tappe, erscheint ein Startbildschirm mit dem Namen und dem Logo der Volumio-Steuerung, bevor die Seite dann ohne Browserzeile, wie eine richtige App angezeigt wird.
Das geht mit weiteren Meta-Tags, die offenbar von Apple eingeführt wurden. Bei mir funktioniert das aber auch im Chromium-basierten Browser – im Firefox geht es nicht:
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Du kannst das ja mal ausprobieren: Wenn Du in Deinem mobilen Browser mal auswählst, dass Du mein Blog zur Startseite hinzufügen willst, bekommst Du ein neues Icon in Form meiner Kaffeeringe. Wenn Du das anklickst, kommt erst kurz der Startbildschirm mit Logo und Titel und dann die Seite ohne Browserzeile.
Für ein Blog ist das eher nicht sinnvoll. Aber für Seiten, die tatsächlich eher Web-Apps sind, ist das eine tolle Möglichkeit.
Schreibe einen Kommentar