Что делает стиль apple-mobile-web-app-status-bar?

Ответ 1

Во-первых, для этого нужно установить подсказку apple-mobile-web-app-capable. Эта подсказка заставляет веб-приложение работать в полноэкранном режиме: он удаляет адресную строку и кнопки навигации по умолчанию в Mobile Safari. Удаленные области выделены красным цветом здесь:

Итак, как только приложение находится в полноэкранном режиме (то есть пользователь добавил сайт на свою домашнюю страницу), вы также можете управлять цветом оставшейся тонкой строки состояния в верхней части страницы с помощью apple-mobile-web-app-status-bar-style, выделено красным цветом здесь:

В документах:

Если для содержимого установлено значение default, строка состояния отображается нормально. Если установлено значение black, строка состояния имеет черный фон. Если установлено значение black-translucent, строка состояния черная и полупрозрачная. Если установлено значение по умолчанию или черное, веб-контент отображается ниже строки состояния. Если установлено значение black-translucent, веб-контент отображается на весь экран, частично скрытый в строке состояния.

Несколько предостережений:

• Это работает только на первой загружаемой странице; любая переадресация на другую страницу приведет к появлению адресной строки и навигационных кнопок. Поэтому, если вы хотите, чтобы это сработало, вам нужно создать сайт с одной страницей (для нескольких "страниц" рассмотрим подход загрузки страницы Ajax, такой как используемый в среде jQuery Mobile).

• Это работает только при приходе на веб-страницу с помощью ярлыка приложения; если вы перейдете на сайт непосредственно из Mobile Safari, это не повлияет.

Ответ 2

Он изменяет верхний бар с баннером и несущей на нем и делает его полупрозрачным.