Question 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 vraiment la possibilité de changer la couleur de la barre d'adresse et la couleur de l'en-tête sur Aperçu? Y a-t-il un moyen facile de faire cela?

Chrome for Android  enter image description here.

Je pense que vous avez besoin d'Android 5.0 Lollipop pour que cela fonctionne, et Chrome Fusionner les onglets et les applications mis à Sur.


467
2017-11-16 18:48


origine


Réponses:


Trouvé la solution après quelques recherches.

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

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

661
2017-11-16 18:54



Vous avez réellement besoin de 3 meta tags pour soutenir 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">

400
2017-10-18 02:37



Par exemple, pour définir l'arrière-plan de votre couleur préférée / de marque

Ajouter ci-dessous Meta propriété à votre code HTML TÊTE Section

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

Exemple

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

Dans Image ci-dessous, je viens de mentionner Comment Chrome a pris votre propriété de couleur de thème

enter image description here

Firefox OS, Safari, Internet Explorer et Opera Coast vous permettent de définir des couleurs pour les éléments du navigateur, et même la plate-forme à l'aide de métabalises.

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

Des lignes directricesDocuments ici

Masquage des composants de l'interface utilisateur Safari

Définissez la méta-étiquette compatible apple-mobile-web-app sur yes 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 changer l'apparence de la barre d'état par défaut en noir ou en noir translucide. Avec le noir translucide, la barre d'état flotte au-dessus du contenu plein écran, plutôt que de le pousser vers le bas. Cela donne plus de hauteur à la mise en page, mais obstrue la partie supérieure. Voici le code requis:

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

Pour en savoir plus sur l'apparence de la barre d'état, voir apple-mobile-web-app-status-bar-style.

Par exemple:

Capture d'écran en utilisant noir-translucide

Screenshot using black-translucent

Capture d'écran en noir

Screenshot using black


51
2018-06-04 12:43



Du Documentation officielle,

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

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

En outre, Chrome affichera de belles favicons haute résolution lorsqu'elles seront fournies. Chrome pour Android sélectionne l'icône de résolution la plus élevée que vous fournissez, et nous vous recommandons de fournir un fichier PNG de 192 × 192 pixels. Par exemple:

<link rel="icon" sizes="192x192" href="nice-highres.png">

38
2017-12-11 12:20