web-dev-qa-db-fra.com

Comment changer la couleur de la barre d'en-tête et de la barre d'adresse dans la dernière version de Chrome sur Lollipop?

Je n'ai encore rien trouvé sur ce sujet. J'aime beaucoup la possibilité de changer la couleur de la barre d'adresse et de la couleur de l'en-tête dans Aperçu? Y a-t-il un moyen facile de faire cela?

Chrome for Androidenter image description here.

Je pense que vous avez besoin de Android 5.0 Lollipop pour que cela fonctionne, et de Chrome Fusionner les onglets et les applications défini sur On.

androidhtmlgoogle-chrome
534
Arpad Gabor

Trouvé la solution après quelques recherches.

Vous devez ajouter une balise <meta> dans votre <head> contenant name="theme-color", avec votre code HEX comme valeur de contenu. Par exemple:

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

Vous avez en fait besoin de 3 balises meta pour prendre en charge Android, iPhone et 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">
463
Edoardo L'Astorina

Par exemple, pour définir l’arrière-plan sur votre couleur préférée/Marque

Ajoutez ci-dessous la propriété Meta à votre code HTML dans la section HEAD

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

Exemple

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

Dans l'image ci-dessous, je viens de mentionner comment Chrome a pris votre propriété thème-color

enter image description here

Firefox OS, Safari, Internet Explorer et Opera Coast vous permettent de définir les couleurs des éléments du navigateur, voire de la plate-forme, à l'aide de balises META.

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

Style spécifique à Safari

D'après les directives Documents Here

Masquage des composants de l'interface utilisateur Safari

Définissez la balise méta compatible Apple-mobile-web-app sur Oui pour activer le mode autonome. Par exemple, le code HTML suivant affiche le contenu Web en mode autonome.

<meta name="Apple-mobile-web-app-capable" content="yes">

Modification de l'apparence de la barre d'état

Vous pouvez modifier l'apparence de la barre d'état par défaut en noir ou noir translucide. Avec le noir translucide, la barre d'état flotte au-dessus du contenu plein écran, plutôt que de le réduire. Cela donne plus de hauteur à la mise en page, mais gêne le sommet. Voici le code requis:

<meta name="Apple-mobile-web-app-status-bar-style" content="black">

Pour plus d'informations sur l'apparence de la barre d'état, voir Style de barre Apple-mobile-web-app-status-.

Par exemple:

Capture d'écran avec black-translucent

Screenshot using black-translucent

Capture d'écran en noir

Screenshot using black

81
Ravi Delixan

Du documentation officielle ,

Par exemple, pour définir la couleur d’arrière-plan sur orange:

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

De plus, Chrome affichera de beaux favicons haute résolution lorsqu'ils seront fournis. Chrome pour Android choisit l'icône de résolution la plus élevée fournie, et nous vous recommandons de fournir un fichier PNG 192 × 192px. Par exemple:

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