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

Question

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

406

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

.

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

Arpad Gabor 16 нояб. 2014, в 18:18

Источник

0

По состоянию на январь 2016 года опция «Объединять вкладки» больше не нужна для этого (в Lollipop).
Skuld 17 март 2016, в 11:42
1

То же самое можно сказать и о KitKat.
Revetahw 22 апр. 2016, в 13:25
0

@Skuld Вам нужны вкладки слияния, чтобы увидеть цвет в представлении «Последние приложения», но даже если вы отключили «Слияние вкладок и приложений», вы все равно сможете увидеть этот цвет при просмотре веб-сайта в Chrome. Но я надеюсь, что когда-нибудь они это исправят, чтобы в списке вкладок в Chrome (показанном, когда «Объединение вкладок и приложений») также отображался цвет темы вместо тускло-серого.
ADTC 09 авг. 2016, в 16:40
1

@ADTC вы говорите, когда вы переходите на вкладки, он теряет цвет? Если это так, то да, это не идеально, но на самом деле не имеет большого значения, так как он восстанавливает цвет при нажатии на вкладку. Самое главное, что веб-сайт имеет правильный цвет :)
Skuld 10 авг. 2016, в 13:50
1

@Skuld с «Объединить вкладки и приложения» выключен, вы получите этот вид (ссылка) при переключении вкладок. В этом представлении все вкладки просто серые. Было бы хорошо, если бы цвет темы оставался в этом представлении. Подобно тому , как «приложение, как вкладка» имеет цвет темы , когда «Объединить вкладки и приложение» включены и вы открываете приложение переключатель. (PS: Лично я ненавижу слияние, потому что у меня много вкладок, а потом у меня тоже много приложений. Я хочу оставить их отдельно или я сойду с ума >.< )
ADTC 11 авг. 2016, в 03:41
0

Кто-нибудь нашел способ установить цвет нижней панели (Назад, Домой, Кнопки меню). Хотя бы темный вариант против светлого?
gman 06 июнь 2018, в 02:48

Показать ещё 4 комментария

Теги:

html

android

google-chrome

4 ответа

313

Вам действительно нужны теги 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">

Edoardo L'Astorina 18 окт. 2015, в 04:13

6

К сожалению, это не сработало для Iphone ...
viriato 21 янв. 2016, в 12:43
0

А как насчет загрузки бар? Как я видел сайты, которые делают верхнюю полосу темной, а полоса загрузки - белой, но я не могу найти фрагмент, анализирующий код?
Newbie 04 фев. 2016, в 05:19
15

Примечание : в соответствии с примечаниями разработчика Apple : «Этот метатег не имеет никакого эффекта, если вы сначала не укажете полноэкранный режим, как описано в параметре apple-apple-mobile-web-app-capable ».
Yan Foto 06 фев. 2016, в 14:06
0

@YanFoto, это действительно очень полезная информация. Как можно это сделать?
viriato 24 фев. 2016, в 08:40
0

@viriato Я не сделал это сам. Извини :(
Yan Foto 24 фев. 2016, в 16:43
0

@YanFoto Я не понимаю, по мнению Apple, сам ответ Эдоардо Л'Асторины должен сработать ... Красный это: developer.apple.com/library/iad/documentation/AppleApplications/…
viriato 25 фев. 2016, в 06:10
0

В документах для разработчиков есть еще один метатег для полного экрана @viriato
ladle3000 07 март 2016, в 14:36
34

Атрибут iOS apple-mobile-web-app-status-bar-style поддерживает только black , black-translucent or умолчанию` - вы не можете использовать пользовательский цвет.
sixones 14 март 2016, в 22:15
2

если вы используете black-translucent , то верхняя полоса станет прозрачной с белым текстом, что, вероятно, будет тем, что вам нужно
99 Problems - Syntax ain't one 06 апр. 2016, в 14:33
0

Что редактирование добавляет к ответу здесь? Это не более подробно, просто ваша статья.
DatBassie 10 апр. 2016, в 08:01
0

Есть ли способ изменить цвет текста панели инструментов заголовка? Кажется, автоматически выбирается черный или белый, в зависимости от оттенка, но я бы хотел выбрать цвет текста.
Andre Bulatov 30 апр. 2016, в 18:33
0

В Windows «msapplication-navbutton-color» определяет только пользовательский цвет кнопок «Назад» и «Вперед» в окне браузера закрепленного сайта.
rubo77 25 май 2016, в 01:53

Показать ещё 10 комментариев

44

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

Добавьте ниже Мета-свойство в свой HTML-код в разделе HEAD

<head>
  ...
  <meta name="theme-color" content="Your Hexa Decimal 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 для "да", чтобы включить автономный режим. Например, следующий 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.

Пример:

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

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

Ravi Delixan 04 июнь 2016, в 14:30

38

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

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

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

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

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

khandelwaldeval 11 дек. 2015, в 13:53

18

это то же самое, что и оригинальный ответ, кроме добавления несвязанной информации
igorsantos07 11 дек. 2015, в 17:05
9

@ igorsantos07 Я просто хотел добавить ссылку на официальные документы. это оно
khandelwaldeval 11 дек. 2015, в 23:03
16

@devaldcool: вы можете отредактировать верхний ответ и добавить ссылку.
Dan Dascalescu 09 март 2016, в 20:32
3

Я думал, что ссылка на документацию - это именно то, чего не хватало в выбранном ответе. Это то, что я гуглил, когда оказался здесь. Спасибо.
Justin Force 02 июнь 2016, в 19:42
0

Это избыточно
taimur alam 27 март 2019, в 16:50

Показать ещё 3 комментария

Ещё вопросы

По состоянию на январь 2016 года опция «Объединять вкладки» больше не нужна для этого (в Lollipop).
То же самое можно сказать и о KitKat.
@Skuld Вам нужны вкладки слияния, чтобы увидеть цвет в представлении «Последние приложения», но даже если вы отключили «Слияние вкладок и приложений», вы все равно сможете увидеть этот цвет при просмотре веб-сайта в Chrome. Но я надеюсь, что когда-нибудь они это исправят, чтобы в списке вкладок в Chrome (показанном, когда «Объединение вкладок и приложений») также отображался цвет темы вместо тускло-серого.
@ADTC вы говорите, когда вы переходите на вкладки, он теряет цвет? Если это так, то да, это не идеально, но на самом деле не имеет большого значения, так как он восстанавливает цвет при нажатии на вкладку. Самое главное, что веб-сайт имеет правильный цвет :)
@Skuld с «Объединить вкладки и приложения» выключен, вы получите этот вид (ссылка) при переключении вкладок. В этом представлении все вкладки просто серые. Было бы хорошо, если бы цвет темы оставался в этом представлении. Подобно тому , как «приложение, как вкладка» имеет цвет темы , когда «Объединить вкладки и приложение» включены и вы открываете приложение переключатель. (PS: Лично я ненавижу слияние, потому что у меня много вкладок, а потом у меня тоже много приложений. Я хочу оставить их отдельно или я сойду с ума >.< )
Кто-нибудь нашел способ установить цвет нижней панели (Назад, Домой, Кнопки меню). Хотя бы темный вариант против светлого?
К сожалению, это не сработало для Iphone ...
А как насчет загрузки бар? Как я видел сайты, которые делают верхнюю полосу темной, а полоса загрузки - белой, но я не могу найти фрагмент, анализирующий код?
Примечание : в соответствии с примечаниями разработчика Apple : «Этот метатег не имеет никакого эффекта, если вы сначала не укажете полноэкранный режим, как описано в параметре apple-apple-mobile-web-app-capable ».
@YanFoto, это действительно очень полезная информация. Как можно это сделать?
@viriato Я не сделал это сам. Извини :(
@YanFoto Я не понимаю, по мнению Apple, сам ответ Эдоардо Л'Асторины должен сработать ... Красный это: developer.apple.com/library/iad/documentation/AppleApplications/…
В документах для разработчиков есть еще один метатег для полного экрана @viriato
Атрибут iOS apple-mobile-web-app-status-bar-style поддерживает только black , black-translucent or умолчанию` - вы не можете использовать пользовательский цвет.
если вы используете black-translucent , то верхняя полоса станет прозрачной с белым текстом, что, вероятно, будет тем, что вам нужно
Что редактирование добавляет к ответу здесь? Это не более подробно, просто ваша статья.
Есть ли способ изменить цвет текста панели инструментов заголовка? Кажется, автоматически выбирается черный или белый, в зависимости от оттенка, но я бы хотел выбрать цвет текста.
В Windows «msapplication-navbutton-color» определяет только пользовательский цвет кнопок «Назад» и «Вперед» в окне браузера закрепленного сайта.
это то же самое, что и оригинальный ответ, кроме добавления несвязанной информации
@ igorsantos07 Я просто хотел добавить ссылку на официальные документы. это оно
@devaldcool: вы можете отредактировать верхний ответ и добавить ссылку.
Я думал, что ссылка на документацию - это именно то, чего не хватало в выбранном ответе. Это то, что я гуглил, когда оказался здесь. Спасибо.

Arpad Gabor · Accepted Answer · 2014-11-16T19-02-00.000Z

546

Лучший ответ

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

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

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

Arpad Gabor 16 нояб. 2014, в 19:02

18

Благодарю. Оформите также html5rocks для получения дополнительной информации: updates.html5rocks.com/2014/11/…
redochka 13 март 2015, в 10:20
3

Есть ли какие-либо настройки в Chrome, чтобы отключить это? Я терпеть не могу цветную адресную строку. Я просто хочу цвет по умолчанию.
James 06 нояб. 2015, в 22:19
0

@James - это, возможно, не то исправление, которое вам нравится, но вы можете остановить изменение цвета, отключив настройку «Объединение вкладок с приложениями».
Novocaine 14 дек. 2015, в 12:41
4

В самом деле? Я использую Зефир, с отключенной настройкой «Объединение вкладок с приложениями», но адресная строка все еще цветная. Может быть, они «исправили ошибку».
user711413 30 янв. 2016, в 12:23
0

@ user711413 недавнее обновление Chrome включило это для не-слияния (у меня это начало работать на прошлой неделе на Lollipop)
Skuld 01 фев. 2016, в 10:01
0

Есть ли способ изменить цвет текста панели инструментов заголовка? Кажется, автоматически выбирается черный или белый, в зависимости от оттенка, но я бы хотел выбрать цвет текста.
Andre Bulatov 30 апр. 2016, в 18:33
3

Не обязательно должен быть шестнадцатеричный цвет, любой действительный цвет CSS будет работать.
Bogdan M. 18 май 2016, в 14:05
0

Я попытался с именем цвета CSS, и это не сработало, может быть, потому что у меня не последний Android? Я не знаю, я просто сообщаю об этом для будущих читателей, сейчас я пытаюсь с шестнадцатеричным значением.
Gianluca Casati 15 авг. 2017, в 16:21
0

Вот ссылка на оригинальную документацию
rustyx 02 сен. 2017, в 17:01

Показать ещё 7 комментариев