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

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

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

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

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

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

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

  1. Дмитрий Давыдов

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

  2. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  3. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  4. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  5. Дмитрий Давыдов

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности