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

578

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

Chrome для Android введите описание изображения здесь,

Я думаю, вам нужен Android 5.0 Lollipop, чтобы это работало, а вкладки и приложения Chrome для слияния установлены на Вкл .

android html google-chrome Арпад Габор
источник
По состоянию на январь 2016 года опция «Объединять вкладки» больше не нужна для этого (в Lollipop).
Skuld
1
Теперь это так и для KitKat ..
Реветах говорит, что восстановите Монику
@Skuld Вам нужны вкладки слияния, чтобы увидеть цвет в представлении «Недавние приложения», но даже если вы отключили «Слияние вкладок и приложений», вы все равно сможете увидеть этот цвет при просмотре веб-сайта в Chrome. Но я надеюсь, что когда-нибудь они это исправят, чтобы в списке вкладок в Chrome (показанном, когда «Объединение вкладок и приложений») также отображался цвет темы вместо тускло-серого.
ADTC
1
@ADTC вы говорите, когда вы переходите на вкладки, он теряет цвет? Если это так, то да, это не идеально, но на самом деле не имеет большого значения, так как он восстанавливает цвет при нажатии на вкладку. Самое главное, что веб-сайт имеет правильный цвет :)
Skuld
1
@Skuld с «Merge Tabs и приложением» оказался выключен , вы получите этот вид (ссылка) при переключении вкладок. В этом представлении все вкладки просто серые. Было бы хорошо, если бы цвет темы оставался в этом представлении. Подобно тому , как «приложение, как вкладке» имеет цвет темы , когда «Объединить вкладки и приложения» включается на и вы открываете приложение переключателя. (PS: Лично я ненавижу слияние, потому что у меня много вкладок, а затем у меня много приложений. Я хочу оставить их отдельно или я сойду с ума >.< )
ADTC

Ответы:

791

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

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

<meta name="theme-color" content="#999999" />
Арпад Габор
источник
19
Спасибо. Оформите также html5rocks для получения дополнительной информации: updates.html5rocks.com/2014/11/…
redochka
4
Есть ли какие-либо настройки в Chrome, чтобы отключить это? Я терпеть не могу цветную адресную строку. Я просто хочу цвет по умолчанию.
Джеймс
@James - это, возможно, не то исправление, которое вам нравится, но вы можете остановить изменение цвета, отключив настройку «Объединение вкладок с приложениями».
Новокаин
4
В самом деле? Я использую Зефир, с отключенной настройкой «Объединить вкладки с приложениями», но адресная строка все еще цветная. Может быть, они «исправили ошибку».
user711413 30.01.16
3
Не обязательно должен быть шестнадцатеричный цвет, любой действительный цвет CSS будет работать.
Богдан М.
501

Вам на самом деле нужно 3 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">
Эдоардо Л'Асторина
источник
А как насчет загрузки бар? Как я видел сайты, которые делают верхнюю полосу темной, а полоса загрузки - белой, но я не могу найти фрагмент, анализирующий код?
Новичок
19
Примечание : согласно примечаниям разработчика Apple : «Этот метатег не имеет никакого эффекта, если вы сначала не укажете полноэкранный режим, как описано в apple-apple-mobile-web-app-capable».
Ян Фото
@YanFoto это действительно очень полезная информация. Как можно это сделать?
Вириато
44
apple-mobile-web-app-status-bar-styleАтрибут iOS поддерживает только black, по black-translucent or умолчанию` - вы не можете использовать собственный цвет.
Sixones
2
если вы используете black-translucentего, то верхняя строка станет прозрачной с белым текстом, который, вероятно, будет таким, какой вы хотели бы
99 Проблемы - Синтаксис не один
93

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

Добавьте свойство 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.

Например:

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

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

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

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

Рави Деликсан
источник
42

Из официальной документации ,

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

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

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

<link rel="icon" sizes="192x192" href="nice-highres.png">
Деваль Хандельвал
источник
22
это то же самое, что и оригинальный ответ, кроме добавления несвязанной информации
igorsantos07
9
@ igorsantos07 Я просто хотел добавить ссылку на официальные документы. Вот и все
Деваль Хандельвал
4
Я думал, что ссылка на документацию - это именно то, чего не хватало в выбранном ответе. Это то, что я гуглил, когда оказался здесь. Спасибо.
Джастин Форс
Это избыточно
Таймур Алам