it-swarm.com.de

Wie ändere ich die Farbe der Kopf- und Adressleiste in der neuesten Chrome Version von Lollipop?

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? Gibt es eine einfache Möglichkeit, dies zu tun?

Chrome for Androidenter image description here.

Ich denke, Sie brauchen Android 5.0 Lollipop, damit dies funktioniert, und Chrome Tabs und Apps zusammenführen auf Ein gesetzt.

534
Arpad Gabor

Fand die Lösung nach einigem Suchen.

Sie müssen ein <meta> -Tag in Ihr <head> einfügen, das name="theme-color" enthält, und Ihren HEX-Code als Inhaltswert verwenden. Zum Beispiel:

<meta name="theme-color" content="#999999" />
745
Arpad Gabor

Sie benötigen tatsächlich 3 meta Tags, um Android, iPhone und Windows Phone zu unterstützen

<!-- 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">
463

Zum Beispiel, um den Hintergrund auf Ihre Lieblings-/Markenfarbe einzustellen

Fügen Sie Ihrem HTML-Code in HEAD Section Below Meta Property hinzu

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

Beispiel

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

In Abbildung unten habe ich gerade erwähnt, wie Chrome Ihre Theme-Color-Eigenschaft übernommen hat

enter image description here

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">

Safari-spezifisches Design

Aus den Richtlinien Dokumente hier

Komponenten der Safari-Benutzeroberfläche ausblenden

Setzen Sie das Apple-Mobile-Web-App-fähige Meta-Tag 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 Erscheinungsbild der Standardstatusleiste in schwarz oder schwarz-durchscheinend ändern. Wenn die Statusleiste schwarz durchscheinend ist, wird sie nicht nach unten gedrückt, sondern über den gesamten Bildschirminhalt verschoben. Dies verleiht dem Layout mehr Höhe, behindert jedoch 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 siehe Apple-Mobile-Web-App-Statusleistenstil.

Zum Beispiel:

Screenshot mit schwarz durchscheinend

Screenshot using black-translucent

Screenshot mit Schwarz

Screenshot using black

81
Ravi Delixan

Aus dem Offizielle Dokumentation ,

So stellen Sie beispielsweise die Hintergrundfarbe auf Orange ein:

<meta name="theme-color" content="#db5945">

Darüber hinaus werden in Chrome schöne hochauflösende Favoriten angezeigt, wenn sie bereitgestellt werden. Chrome für Android wählt das Symbol mit der höchsten Auflösung aus, das Sie bereitstellen, und wir empfehlen, eine PNG-Datei mit 192 × 192 Pixel bereitzustellen. Zum Beispiel:

<link rel="icon" sizes="192x192" href="Nice-highres.png">
40
khandelwaldeval