Цвет статус бара на мобильных

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

А может я ошибаюсь, и вы давно пользуетесь мета тегом:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Если - нет, то возможно, самое время начать. Хотя он работает только в браузере Safari на IOS устройствах и имеет все несколько вариантов, но я покажу как поменять цвет и в других браузерах.

Итак, статус бар - это область смартфона, в которой показывается процент заряда батареи, индикатор сети и т.д. Вот именно на цвет этой области, а также области в которой вводится адрес сайта мы можем влиять.

Как я уже говорил, для Safari на IOS устройствах используем мета тег:

<meta name="apple-mobile-web-app-status-bar-style" content="default">

К сожалению, здесь может быть только 1 из 3 вариантов:

  • content="black"
  • content="default"
  • content="black-translucent"

Поэкспериментируйте немного.

Как изменить цвет статус бара html

Для того, чтобы раскрасить статус бар в любой цвет в браузерах Chrome, Firefox и Opera, можно воспользоваться таким тегом:

<meta name="theme-color" content="#33BEE5">

Цвет статус бара на мобильном

Для Windows Phone используем тег:

<meta name="msapplication-navbutton-color" content="#33BEE5">

К сожалению, протестировать не могу, но это должно работать 🙂 У кого есть возможность, проверьте пожалуйста. В конечном итоге, это добавляется между тегами head и выглядит следующим образом:

<!-- Chrome, Firefox, Opera -->
<meta name="theme-color" content="#33BEE5">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#33BEE5">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Вот таким не хитрым способом, можно сделать мобильную версию чуточку дружелюбнее и красивее. А на сегодня - все.

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 5

  1. Михаил

    Надеюсь, наступит тот светлый день, когда под любые браузеры верстка будет одинаковой.

  2. Санжар

    На Windows 10 Mobile никаких изменений не произошло. Скорее всего это для Windows Phone 8.1

    • Дмитрий

      Вполне возможно, спасибо, что отписал об этом.

  3. Bogutskiy

    Не всегда срабатывает… как то через раз… в чем может быть проблема?

    • dimadv7

      Привет, да нет, должно быть нормально все. У меня всегда срабатывает. На андроиде, на яблоке, тоже становится либо темным, либо светлым. Может в кэше страницы?

Добавить комментарий