Измените цвет темы адресной строки мобильного браузера и строки состояния мобильной системы.

Как при просмотре веб-сайта на мобильном телефоне настроить соответствие цвета адресной строки мобильного браузера и строки состояния темы сайта? Для достижения соответствия цвета адресной строки мобильного браузера и строки состояния темы сайта можно использовать следующую строку кода.

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

Начиная с Android 5.0 и Google Chrome версии 39, в Chrome появилась возможность изменять цвет темы с помощью метатега theme-color. Для чего это нужно?

С развитием HTML5 мобильные веб-приложения и адаптивные веб-страницы становятся всё более похожими на функции мобильных приложений. Функция изменения цвета темы делает веб-приложения ещё более похожими на локальные приложения.

Следует отметить, что эта функция есть только в Google Chrome.Изменить цвет адресной строки в Google Chrome.

Метод очень прост, метатег theme-color может реализовать эту функцию, нам нужно толькоДобавьте метатег с name="theme-color" в середину тега и задайте значение содержимого для указанного вами цвета, как в следующей строке кода:

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

Theme-color работает только в Google Chrome. Если вы хотите изменить внешний вид адресной строки в Safari на iPhone и IE на Windows Phone, воспользуйтесь следующим кодом:

Цвет верхней строки состояния в Safari 15 задаётся с помощью метатега theme-color. Просто добавьте следующую строку кода в заголовок веб-страницы:

Если ваша веб-страница поддерживает темный режим и вы хотите, чтобы верхний статус имел разные цвета для двух режимов, вы можете добавить следующие две строки кода: