Arpad Gabor
Zu diesem Thema habe ich noch nichts gefunden. Ich mag die Möglichkeit, die Farbe der Adressleiste und der Kopfzeilenfarbe in der Übersicht zu ändern. Gibt es eine einfache Möglichkeit, dies zu tun?
.
Ich denke, Sie brauchen Android 5.0 (Lollipop), damit dies funktioniert, und Chrome’s Registerkarten und Apps zusammenführen einstellen An.
Arpad Gabor
Ich habe die Lösung nach einigem Suchen gefunden.
Sie müssen ein hinzufügen <meta> tag in deinem <head> enthält name="theme-color", mit Ihrem Hexadezimalcode als Inhaltswert. Zum Beispiel:
<meta name="theme-color" content="#999999" />
Wenn das Android-Gerät native dark-mode aktiviert, dann das meta Tag wird ignoriert.
Chrome für Android verwendet die Farbe auf Geräten mit nativem nicht
dark-modeaktiviert.
Quelle: theme-color Meta-Tag
Vielen Dank. Schauen Sie sich auch html5rocks an, um weitere Informationen zu erhalten: updates.html5rocks.com/2014/11/…
– Redochka
13. März 2015 um 10:20 Uhr
Gibt es Einstellungen in Chrome, um dies zu deaktivieren? Ich kann die farbige Adressleiste nicht ausstehen. Ich möchte nur die Standardfarbe.
– James
6. November 2015 um 22:19 Uhr
@James – dies ist möglicherweise keine Lösung, die Ihnen gefällt, aber Sie können die Farbänderung stoppen, indem Sie die Einstellung “Tabs mit Apps zusammenführen” deaktivieren.
– Novocain
14. Dezember 2015 um 12:41 Uhr
Wirklich? Ich verwende Marshmallow mit deaktivierter Einstellung „Tabs mit Apps zusammenführen“, aber die Adressleiste ist immer noch farbig. Vielleicht haben sie den Fehler behoben.
– Benutzer711413
30. Januar 2016 um 12:23 Uhr
Muss nicht unbedingt eine Hex-Farbe sein, jede gültige CSS-Farbe funktioniert.
– bool3max
18. Mai 2016 um 14:05 Uhr
Edoardo L’Astorina
Du brauchst eigentlich 3 meta Tags zur Unterstützung von Android, iPhone und Windows Phone
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
Und was ist mit dem Ladebalken? Wie ich Websites gesehen habe, die die obere Leiste dunkel und die Ladeleiste weiß machen, aber ich kann das Snippet nicht finden, das den Code analysiert?
– Neuling
4. Februar 2016 um 5:19 Uhr
Notiz: entsprechend Entwicklernotizen von Apple: “Dieses Meta-Tag hat keine Wirkung, es sei denn, Sie geben zuerst den Vollbildmodus an, wie in beschrieben apple-apple-mobile-web-app-capable.”
– Jan Foto
6. Februar 2016 um 14:06 Uhr
@YanFoto das sind eigentlich sehr nützliche Infos. Wie würde man das machen?
– Viriato
24. Februar 2016 um 8:40 Uhr
Das iOS apple-mobile-web-app-status-bar-style Attribut unterstützt nur black, black-translucent or default` – Sie können keine benutzerdefinierte Farbe verwenden.
– Sechseins
14. März 2016 um 22:15 Uhr
wenn du benutzt black-translucent Dadurch wird die obere Leiste mit weißem Text transparent, was wahrscheinlich das ist, wonach Sie suchen würden
– 99 Probleme – Syntax ist keine
6. April 2016 um 14:33 Uhr
Ravi Delixan
So stellen Sie beispielsweise den Hintergrund auf Ihre Lieblings-/Markenfarbe ein:
Fügen Sie das Folgende hinzu Meta-Eigenschaft zu Ihrem HTML-Code in der KOPF Sektion
<head>
...
<meta name="theme-color" content="Your Hexadecimal Code">
...
</head>
Beispiel
<head>
...
<meta name="theme-color" content="#444444">
...
</head>
Im folgenden Bild habe ich gerade erwähnt, wie Chrome Ihre Theme-Color-Eigenschaft übernimmt:
Mit Firefox OS, Safari, Internet Explorer und Opera Coast können Sie Farben für Elemente des Browsers und sogar der Plattform mithilfe von Meta-Tags definieren.
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Aus den Richtlinien (Dokumente hier):
Ausblenden von Komponenten der Safari-Benutzeroberfläche
Setzen Sie das Meta-Tag apple-mobile-web-app-capable auf yes, um den Standalone-Modus zu aktivieren. Der folgende HTML-Code zeigt beispielsweise Webinhalte im Standalone-Modus an.
<meta name="apple-mobile-web-app-capable" content="yes">Ändern des Aussehens der Statusleiste
Sie können das Aussehen der Standardstatusleiste entweder in schwarz oder schwarz-durchscheinend ändern. Bei schwarz-durchscheinend schwebt die Statusleiste über dem Vollbildinhalt, anstatt ihn nach unten zu drücken. Dies verleiht dem Layout mehr Höhe, behindert aber die Oberseite. Hier ist der erforderliche Code:
<meta name="apple-mobile-web-app-status-bar-style" content="black">Weitere Informationen zum Erscheinungsbild der Statusleiste finden Sie unter Unterstützte Meta-Tags.
Zum Beispiel:
Screenshot mit schwarz-durchscheinend
Screenshot mit Schwarz
Deval Khandelwal
Von dem amtliche Dokumentation:
So stellen Sie beispielsweise die Hintergrundfarbe auf Orange ein:
<meta name="theme-color" content="#db5945">Darüber hinaus zeigt Chrome schöne hochauflösende Favicons an, wenn sie bereitgestellt werden. Chrome für Android wählt das von Ihnen bereitgestellte Symbol mit der höchsten Auflösung aus, und wir empfehlen, eine PNG-Datei mit 192 × 192 Pixel bereitzustellen. Zum Beispiel:
<link rel="icon" sizes="192x192" href="nice-highres.png">
John Yeptomi
Überprüfen Sie alle diese Schritte:
<meta name="theme-color" content="#db4b5d" /> im HTML <head> Schild.
Ab Januar 2016 ist die Option “Tabs zusammenführen” nicht mehr erforderlich, damit dies funktioniert (in Lollipop).
– Stefan
17. März 2016 um 11:42 Uhr
So ist es jetzt auch bei KitKat..
– Fiksdal
22. April 2016 um 13:25 Uhr
@Skuld Sie benötigen Tabs zusammenführen, um die Farbe in der Ansicht “Zuletzt verwendete Apps” zu sehen, aber selbst wenn Sie “Tabs und Apps zusammenführen” deaktiviert haben, können Sie die Farbe immer noch sehen, wenn Sie die Website in Chrome anzeigen. Aber ich hoffe, sie beheben es eines Tages, sodass die Tabs-Liste in Chrome (angezeigt, wenn „Tabs und Apps zusammenführen“ deaktiviert ist) auch die Designfarbe anstelle des stumpfen Graus anzeigt.
– ADTC
9. August 2016 um 16:40 Uhr
@ADTC sprichst du davon, wenn du die Registerkarten wechselst, verliert es die Farbe? Wenn ja, dann ja, es ist nicht ideal, aber keine große Sache, da es die Farbe wiedererlangt, wenn Sie auf die Registerkarte klicken. Die große Sache ist, dass die Website beim Betrachten die richtige Farbe hat 🙂
– Stefan
10. August 2016 um 13:50 Uhr
@Skuld, mit “Tabs und Apps zusammenführen” eingeschaltet ausdu erhältst diese Ansicht (Link) wenn Sie die Tabs wechseln. In dieser Ansicht sind alle Registerkarten nur grau. Es wäre schön, wenn die Themenfarbe in dieser Ansicht erhalten bleiben würde. Ähnlich wie der „App-ähnliche Tab“ die Designfarbe hat, wenn „Tabs und Apps zusammenführen“ eingeschaltet ist an und Sie öffnen den App-Umschalter. (PS: Ich persönlich hasse das Zusammenführen, weil ich viele Registerkarten habe, und dann habe ich auch viele Apps. Ich möchte sie getrennt halten, sonst werde ich verrückt
>.<)– ADTC
11. August 2016 um 3:41 Uhr