Как изменить цвет строки заголовка и адресной строки в новейшей версии Chrome на Lollipop?

Пока ничего не найдено. Мне очень нравится возможность изменить цвет адресной строки и цвета заголовка в разделе "Обзор"? Есть ли простой способ сделать это?

Мне кажется, для этого вам нужен Android 5.0 Lollipop, а вкладки Chrome Merge и приложения - On.

Ответы

Ответ 1

Нашел решение после некоторого поиска.

Вам нужно добавить тэг <meta> в <head>, содержащий name="theme-color", с вашим кодом HEX в качестве значения содержимого. Например:

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

Ответ 2

Вам действительно нужны теги meta для поддержки Android, iPhone и 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">

Ответ 3

Например, чтобы установить фон для вашего любимого/фирменного цвета

Добавьте свойство Below Meta в свой HTML-код в разделе HEAD

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

пример

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

В приведенном ниже изображении я только что упомянул, как Chrome взял свойство темы-цвета

Firefox OS, Safari, Internet Explorer и Opera Coast позволяют вам определять цвета для элементов браузера и даже платформы, используя метатеги.

<!-- 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 специфичный стиль

Из руководящих документов здесь

Скрытие компонентов пользовательского интерфейса Safari

Установите метатег apple-mobile-web-app на yes, чтобы включить автономный режим. Например, следующий HTML-код отображает веб-контент в автономном режиме.

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

Изменение внешнего вида строки состояния

Вы можете изменить внешний вид строки состояния по умолчанию на черный или полупрозрачный черный. С черным полупрозрачным, строка состояния плавает поверх полноэкранного контента, а не толкает его вниз. Это придает макету большую высоту, но затрудняет верх. Вот код, необходимый:

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

Подробнее о появлении строки состояния см. В стиле apple-mobile-web-app-status-bar-style.

Например:

Скриншот с использованием черного полупрозрачного

Скриншот с использованием черного

Ответ 4

В Официальная документация,

Например, чтобы установить цвет фона оранжевым:

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

Кроме того, Chrome покажет красивые высококачественные значки, когда они предоставлены. Chrome для Android выбирает самый высокий значок res, который вы предоставляете, и мы рекомендуем предоставить 192x192px PNG файл. Например:

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