Steffen Voß - Technologie & Gesellschaft

Smartphone : So passt Du die Browserzeile an den Look Deiner Website an

Screenshot: Browser-Theme
Screenshot: Browser-Theme

Steffen Voß

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:

1
2
3
4
5
6
<!-- 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:

1
2
<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.

Kommentare

KlausK
KlausK:

Die Browserzeile farblich anzupassen ist eine wirklich geniale Idee! Ich Danke dir für diesen Tipp.
Aber wie bekomme ich mein eigenes Icon auf die Startbildschirme der Nutzer?
Als Lesezeichen nimmt der Androide einfach nur die Farbe und den 1 Buchstaben der Domain 🙁
Das sieht nicht sehr schön aus. Hast du da vielleicht eine Idee?

17.8.2017 um 01:26
Steffen Voß
Steffen Voß:

Welchen Browser nutzt Du? Mit Safari und den Chrome- basierten geht es. Mit Firefox offenbar nicht. Und es könnte auch davon abhängen, welche Oberfläche Du für Android hast….

17.8.2017 um 07:30
Sebastian Müller
Sebastian Müller:

Vorab sei gesagt, dass ich aktuell der Meinung bin, dass Firefox das “größte“ Favicon als Homescreen Icon nutzt.

Für iOS und Chrome habe ich hier eine kleine Zusammenfassung:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- Safari:
// App Icon -->
<link rel="apple-touch-icon" href="icon.png">
                                           
<!-- Optional in verschiedenen Auflösungen -->
<link rel="apple-touch-icon" sizes="152x152" href="icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="icon-ipad-retina.png">

<!-- // Ohne Ecken und Effekte: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="icon.png">

<!-- Launch icon: -->
<link rel="apple-touch-startup-image" href="/launch.png">

<!-- Launch icon title: -->
<meta name="apple-mobile-web-app-title" content="AppTitle">

<!-- Browser UI ausblenden -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Statusbar Farbe ändern: -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Chrome -->
<link rel="icon" sizes="152x152" href="icon.png">
<link rel="icon" sizes="180x180" href="icon_180.png">

Für Chrome (außer ziemlich alten Versionen) kannst du das ganze über eine manifest.json definieren. Dort kannst du auch den Titel usw. definieren.
Diese wird dann im Head verlinkt. :

(https://developer.chrome.com/multidevice/android/installtohomescreen#supporting)

17.8.2017 um 08:55
Sebastian Müller
Sebastian Müller:

Hmm, das die Tags nicht angezeigt werden hätte ich mir denken können:
Ich habe sie hier einmal aufgelistet: https://codepen.io/waschti87/pen/prpwEV

17.8.2017 um 08:59
Steffen Voß
Steffen Voß:

Danke! Ich hab da mal nachgearbeitet.

(Ich muss mal wieder den Hinweis unter dem Kommentarfeld einbauen, welche Tags man benutzen kann.)

17.8.2017 um 10:30
Steffen Voß
Steffen Voß:

WordPress erzeugt die ganzen Icons inkl. Favicon übrigens selbst und baut sie ins HTML ein, wenn man über den Customizer ein Logo hochlädt. Das muss das jeweilige Theme natürlich unterstützen.

17.8.2017 um 10:34
Marcel
Marcel:

Google mal nach manifest.json die bietet auch einige coole Möglichkeiten 🙂

17.8.2017 um 12:55

Schreibe einen Kommentar

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

Möchtest Du per E-Mail benachrichtigt werden, wenn Dir hier jemand antwortet?