Ändern Sie die Designfarbe der Adressleiste des mobilen Browsers und der Statusleiste des mobilen Systems

Wie können beim Surfen auf Websites mit einem Mobiltelefon die Farben der Browser-Adressleiste und der Statusleiste des Mobiltelefons mit dem Website-Design übereinstimmen? Die folgende Codezeile ermöglicht die Farbanpassung des Website-Designs zwischen der Adressleiste und der Statusleiste des Mobiltelefons.

Kürzlich ist mir aufgefallen, dass beim Zugriff auf viele beliebte Websites wie BBC und Facebook über einen mobilen Browser die Farbe der Adressleiste des mobilen Browsers und die Farbe der Systemstatusleiste des Mobiltelefons an die Designfarbe dieser Websites angepasst werden. Dadurch wirkt die Farbanpassung der Anzeigeoberfläche sehr ansprechend. In diesem Artikel zeige ich, wie Sie die Designfarbe der Adressleiste des mobilen Browsers und der Systemstatusleiste des Mobiltelefons an die Farbe Ihrer Website anpassen.

Ab Android 5.0 und Google Chrome Version 39 verfügt der Chrome-Browser über die Funktion, die Designfarbe mithilfe des Meta-Tags „Theme-Color“ zu ändern. Wozu ist das nützlich?

Mit der Entwicklung von HTML5 nähern sich die Funktionen mobiler Webanwendungen und adaptiver Webseiten immer mehr mobilen Apps an. Durch die Funktion zum Ändern der Themenfarbe sehen Webanwendungen noch ähnlicher aus wie lokale Apps.

Es ist zu beachten, dass nur Google Chrome über diese Funktion verfügt.Ändern Sie die Farbe der Adressleiste in Google Chrome.

Die Methode ist sehr einfach. Der Theme-Color-Meta-Tag kann diese Funktion erfüllen. Wir müssen nurFügen Sie in der Mitte des Tags ein Meta-Tag mit name="theme-color" hinzu und legen Sie den Inhaltswert auf die von Ihnen angegebene Farbe fest, wie in der folgenden Codezeile:

Wenn Sie ein hochauflösendes Favicon bereitstellen, kann Google Chrome diesem schöneren Symbol den Vorzug geben. Google Chrome wählt das Symbol mit der höchsten Auflösung aus. Die offizielle Empfehlung lautet, ein PNG-Bild mit 192 × 192 Pixeln zu verwenden, zum Beispiel:

Die Designfarbe funktioniert nur in Google Chrome. Wenn Sie die Adressleistendarstellung in iPhone Safari und Windows Phone IE ändern möchten, beachten Sie den folgenden Code:

Die Farbe der oberen Statusleiste in Safari 15 wird durch den Meta-Tag „Theme-Color“ festgelegt. Fügen Sie einfach die folgende Codezeile in den Kopf Ihrer Webseite ein:

Wenn Ihre Webseite den Dunkelmodus unterstützt und Sie den oberen Status für die beiden Modi in unterschiedlichen Farben festlegen möchten, können Sie die folgenden zwei Codezeilen hinzufügen: