Wie kann ich die Farbe der Kopf- und Adressleiste in der neuesten Chrome-Version auf Lollipop ändern?

Question

Ich habe noch nichts zu diesem Thema gefunden. Mir gefällt die Möglichkeit, die Farbe der Adressleiste und der Kopfzeile in der Übersicht zu ändern, wirklich gut. Gibt es einen einfachen Weg, dies zu tun?

.

Ich glaube, du brauchst Android 5.0 (Lollipop) dafür, und Chroms Merge Tabs and Apps muss auf An eingestellt sein.

Answer 1

Ich habe die Lösung nach einigem Suchen gefunden.

Sie müssen ein -Tag in Ihrem hinzufügen, das name="theme-color" enthält, wobei Ihr hexadezimaler Code als Inhaltswert angegeben ist. Zum Beispiel:

Wenn das Android-Gerät den nativen dark-mode aktiviert hat, wird dieses meta-Tag ignoriert.

Chrome für Android verwendet die Farbe auf Geräten mit aktiviertem nativen dark-mode nicht.

Quelle: theme-color Meta Tag

Answer 2

Sie benötigen tatsächlich 3 meta-Tags zur Unterstützung von Android, iPhone und Windows Phone

Answer 3

Zum Beispiel, um den Hintergrund in Ihrer Lieblings- / Markenfarbe festzulegen:

Fügen Sie das unten stehende Meta-Eigenschaft Ihrem HTML-Code im HEAD-Abschnitt hinzu

  ...

  ...

Beispiel

  ...

  ...

Im folgenden Bild habe ich nur erwähnt, wie Chrome Ihre theme-color-Eigenschaft übernimmt:

Firefox OS, Safari, Internet Explorer und Opera Coast ermöglichen es Ihnen, Farben für Elemente des Browsers und sogar der Plattform mit Meta-Tags zu definieren.

Spezifische Safari-Stil

Aus den Richtlinien (hier Dokumente):

Ausblenden von Safari-Benutzeroberflächenelementen

Setzen Sie das Meta-Tag apple-mobile-web-app-capable auf yes, um den Standalone-Modus einzuschalten. Beispielweise zeigt der folgende HTML-Inhalt im Standalone-Modus webinhalt an.

Ändern des Erscheinungsbilds der Statusleiste

Sie können das Erscheinungsbild der Standard-Statusleiste entweder auf schwarz oder black-translucent ändern. Mit black-translucent schwebt die Statusleiste über dem Vollbildinhalt, anstatt ihn nach unten zu drücken. Dies gibt dem Layout mehr Höhe, aber behindert die Oberseite. Hier ist der erforderliche Code:

Weitere Informationen zum Erscheinungsbild der Statusleiste finden Sie unter _Unterstützte Meta-Tags_.

Zum Beispiel:

Screenshot mit black-translucent

Screenshot mit black

Answer 4

Aus der offiziellen Dokumentation:

Zum Beispiel, um die Hintergrundfarbe auf Orange zu setzen:

Zusätzlich zeigt Chrome schöne hochauflösende Favicons an, wenn sie bereitgestellt werden. Chrome für Android wählt das höchstaufgelöste Icon aus, das Sie bereitstellen, und wir empfehlen, eine 192×192px PNG-Datei bereitzustellen. Zum Beispiel:

Answer 5

Überprüfen Sie alle diese Schritte:

1. Fügen Sie im HTML Tag ein.
2. Öffnen Sie die Chrome-Mobilgeräteeinstellungen:
   • Scrollen Sie nach unten zur Theme-Option
     • Wechseln Sie zum hellen Thema.
3. Aktualisieren Sie die Seite.