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

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

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

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

<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">

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

9 комментариев

  1. Михаил

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

  2. Санжар

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

    1. Дмитрий

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

  3. Bogutskiy

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

    1. dimadv7

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

  4. PHPSID

    Айфон 6
    не работает ни в одном браузере

    1. dimadv7

      PHPSID, да нет, работает на 6s точно

  5. Станислав

    На андроиде все работает, спасибо)))

  6. Кирилл

    Способ с работает и в сафари тоже, спасибо за статью!

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