Как изменить цвет адресной строки в мобильном браузере

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

Зачем делать так, чтобы цвет адресной строки соответствовал вашему сайту в мобильном браузере?

Многие шаблоны WordPress поддерживают мобильные устройства. Однако это все равно выглядит всего лишь как сайт. Изменение цвета адресной строки создает ощущение, будто человек использует приложение. Все это приводит к более приятному опыту использования, продажам и конверсиям.

Сегодня эта возможность поддерживается в большинстве современных мобильных браузеров на базе Chromium, включая Google Chrome, Edge, Brave, Opera и Samsung Internet. Также браузеры поддерживают указание разных цветов для светлого и тёмного режима, что позволяет адресной строке автоматически подстраиваться под предпочтения пользователя.

Как это сделать

Просто добавьте следующий код в файл header.php вашей дочерней темы прямо перед закрывающим тегом </head>.

<meta name=»theme-color» content=»#ff6600″ />

Эта строчка — HTML мета-тег, который использует мобильный браузер для изменения цвета адресной панели.

Если вы хотите поддерживать светлый и тёмный режим, можно добавить две строки:

<meta name=»theme-color» media=»(prefers-color-scheme: light)» content=»#ffffff»>
<meta name=»theme-color» media=»(prefers-color-scheme: dark)» content=»#000000″>

У поля контента есть hex код для цвета, который вы хотите использовать в качестве фонового. Не знаете как получить этот код? Вы можете его получить, используя любой графический редактор вроде Adobe Photoshop, Gimp, Paint и других.

Также вы можете выбрать цвет с помощью онлайновых сервисов по подбору цвета в HTML или расширений браузера, например ColorZilla, чтобы быстро получить нужный hex-код с любой веб-страницы.

*На iOS Safari этот метод не работает, но если вы создаёте PWA (прогрессивное веб-приложение, то есть веб-сайт, который ведёт себя как приложение на устройстве), вы можете изменить цвет строки состояния с помощью <meta name=»apple-mobile-web-app-status-bar-style»>

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520