Измените цвет строки состояния iOS 7 в Safari и Chrome

Ответ 1

Я использую это, в то время как у ios есть ошибка, упомянутая в других ответах.

Сначала я установил строку состояния следующим образом:

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

Для меня это означает, что текст белый и фон прозрачны. Он также плавает над моим контентом.

Тогда у меня есть следующий css:

body{
    background:#dddddd;
}
body:before{
    display: block;
    content: " ";
    height:20px;
    top: 0;
    background:rgba(0,0,0,0.8);
    position:-webkit-sticky;
    position:sticky;
}

При таком подходе у меня темный фон на моей панели статусов с некоторой прозрачностью.

Я не тестировал это с помощью ios6, и он, вероятно, сломается, как только Apple исправит ошибку. Кроме того, он немного сбивается при прокрутке вверх, а эффект отскока перемещает фон из окна состояния.

Тем не менее, это довольно легко исправить, и в основном CSS.

Ответ 2

Обновление 3

minimal-ui был удален в iOS 8: (Подробнее здесь: iOS 8 удален "минимальный-ui" viewport, есть ли другой "мягкий полноэкранный режим" , решения?

Обновление 2

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

Обратите внимание, что в iOS 7.1 появился новый тег minimal-ui, который помогает скрыть браузер Chrome в Mobile Safari, но ничего не делает, когда добавляется на главный экран. Подробнее здесь.

Update

Все еще ошибка в 7.0.4.

Кажется, что ошибка в iOS 7.0.3.

Не имеет <meta name="apple-mobile-web-app-status-bar-style">, определяемый или определяющий его как content="default"= черный фон с черным текстом.

content="black"= черный фон с белым текстом.

content="black-translucent"= черный фон с белым текстом, если фон холста не является чисто белым (FFF). Или полупрозрачный фон с черным текстом, если фон белый.

Любое другое значение content, такое как white, не работает и отображается поведение default.

Подтверждено этой ссылкой: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Ответ 3

Я искал способ сделать то же самое. Единственные варианты, которые я видел до сих пор, включают использование одного из этих трех метатегов в вашем html-документе.

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

<meta name="apple-mobile-web-app-status-bar-style" content="black"> Это делает черту статуса черной и подталкивает содержимое ниже строки состояния.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> Это заставляет контент заходить в строку состояния.

Ответ 4

Вы можете повлиять на оттенок верхнего бара в сафари, изменив цвет фона тела

body {
  background-color: blue; /* for the tint */
  background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */
}

через http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review