Всем привет. Недавно пришлось верстать сайт в темных тонах, и вспомнил, что можно влиять на цвет статус бара на мобильных устройствах, в тон сайту.
Выглядит это гораздо лучше, вот и решил написать заметку в блог. Думаю, не многие даже понимают, о чем сейчас идет речь, но если вы делаете адаптивные сайты, то читайте дальше, вам будет интересно.
А может я ошибаюсь, и вы давно пользуетесь мета тегом:
<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"
Поэкспериментируйте немного.
Для того, чтобы раскрасить статус бар в любой цвет в браузерах 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 комментариев
Надеюсь, наступит тот светлый день, когда под любые браузеры верстка будет одинаковой.
На Windows 10 Mobile никаких изменений не произошло. Скорее всего это для Windows Phone 8.1
Вполне возможно, спасибо, что отписал об этом.
Не всегда срабатывает... как то через раз... в чем может быть проблема?
Привет, да нет, должно быть нормально все. У меня всегда срабатывает. На андроиде, на яблоке, тоже становится либо темным, либо светлым. Может в кэше страницы?
Айфон 6
не работает ни в одном браузере
PHPSID, да нет, работает на 6s точно
На андроиде все работает, спасибо)))
Способ с работает и в сафари тоже, спасибо за статью!