Если вы заходили с мобильного хрома в фейсбук, то наверняка видели, что интерфейс браузера красится в фирменный синий цвет соцсети. Но зачем и как?
Мобильные сайты все больше походят на приложения, нежели на просто сайт с информацией, и Google поддерживает эту тенденцию. Посмотрите хотя бы на то, что в последних версиях мобильного хрома по умолчанию вкладки браузера смешиваются со списком недавно запущенных приложений. Но что не хватает сайту, чтобы стать еще чуточку больше приложением? Конечно же кастомизации оболочки (интрефейса). Начиная с 39 версии хрома для Android Lollipop была внедрена возможность менять цвет интерфейса браузера веб-разработчиками.
Сделать это просто, нужно в <head> добавить новый мета-тег:
<meta name="theme-color" content="#9CC2CE">
Как видно из кода, в content мы записываем цвет, в который окрасится браузер.
Google также рекомендует использовать иконку высокого качества, чтобы это выглядело еще лучше:
<link rel="icon" sizes="192x192" href="nice-highres.png">
Через инспектор устройств хрома, я сделал пример, как это могло бы выглядеть на мобильной версии хабра:
Замечание: Если у пользователя не включено смешивание вкладок с приложениями, то он увидит выбранный вами цвет вкладки на вашем сайте, но в списке вкладок, она по прежнему будет серой.
P.S. Мне хотелось бы, чтобы этот цвет можно было задавать через css, так как это более логичный вариант, да и можно было бы воспользоваться переменной…
Комментарии (20)
Evgeny42
23.02.2016 16:50+11Это же гуглится за две секунды, а делается вставкой одного тега, в чем нагрузочный смысл таких статей?
Ganster41
23.02.2016 16:55+13Наверное в популяризации технологии? Я вот, например, не знал о существовании данной фичи. Хотя конечно, судя по дате публикации по приведенной ссылке, тема уже далеко не нова, да.
format1981
23.02.2016 17:00Я недавно заметил такое на avito. В общем так и думал, что добавляется с помощью мета тега.
Evgeny42
23.02.2016 18:43+1Тема очень не новая, более того подобная статья была полтора года назад https://habrahabr.ru/post/245007/
Наверно, если почаще повторять, то лучше усвоится.
DimNS
24.02.2016 13:34Я тоже первый раз такое узнал. Но если такое и было уже то я ведь не могу читать все ресурсы посвященные теме, я читаю на постоянно основе Хабр, и зачастую это для меня единственный сайт где я узнаю новинки.
Frag
23.02.2016 17:09Чтобы узнать, что это можно вообще сделать, например.
Хотя да, смысла на один пост не очень много. Но он есть.
lifestyle
24.02.2016 07:36-1Можно сделать кучу постов по топовым «волнующим» вопросам со stackoverflow!
Насобирать кучу «плюсиков» и фапать на карму.
de_arnst
24.02.2016 08:57Обратите внимание, что это первая моя статья на разделенном хабре, я не стремлюсь "фапать на карму", это неблагодарное занятие. Я написал заметку, чтобы рассказать людям об этом функционале.
lifestyle
24.02.2016 07:41Вспомнил как была когда-то мода раскрашивать скроллбар в IE6.
Позже все-таки это стало моветоном, лезть в «личное пространство» пользователей стало плохой практикой и от этого отказались.
TimsTims
24.02.2016 08:26Всё новое — хорошо забытое старое. Со временем всем надоест пестрящие цвета и фичу отключат(пользователи)
de_arnst
24.02.2016 08:58Сейчас не только расскрашивают, но еще и добиваются скроллбаров в ие7, чтобы выглядели как на osX… История движется по спирали.
andrewiWD
24.02.2016 12:20+2Пожалуй оставлю вот такую ссылку: http://realfavicongenerator.net/
Генератор мета тэгов фавикона на все случаи жизни (apple иконки, windows плитки, цвет вкладки из данной статьи и т.д.)
SOLON7
Выглядит Забавно, Но удивляет другое, почему Хабр еще до сих пор не покрасил в фирменный стиль свою вкладку. Видимо работы много, некогда красить заборы и вкладки (Том Сойер).
hardex
Ты уж прости нас, подвели тебя, подкачали.
Indexator
Не шмогла)