IOS 8: положение бара состояния веб-приложения и проблемы с изменением размера

При установке метатег

apple-mobile-web-app-capable

apple-mobile-web-app-status-bar-style

чтобы создать полноэкранное веб-приложение, строка состояния iOS находится в верхней части экрана (полупрозрачная), а внизу - еще одна пустая черная полоска.

Здесь мой код:

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body><h1>Test</h1>
<p>Capture a photo using camera</p>
<input type="file" capture="camera" accept="image/*">
</body></html>

Есть дополнительная проблема с тегом apple-mobile-web-app-status-bar-style. После приема и приема фотографии через вход камеры черные полосы появляются по бокам экрана. Я использую iOS8 GM на iPad3.

Я думаю, что это может быть ошибка iOS 8, но Apple, похоже, не заботится о моем отчете об ошибке: (

Кто-нибудь знает решение/обходной путь для этой проблемы?

Обновление 1: Apple опубликовала мой отчет об ошибке как Duplicate (Closed) 19 сентября.

Обновление 2: Ошибка исправлена в iOS 8.3 Beta 1

Ответ 1

Apple исправила эту ошибку в iOS 8.3 beta 1

Ответ 2

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

На устройствах iOS8, на которых установлены закрепленные веб-приложения. Относительно тега:

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

От ссылка разработчика Apple:

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

Чтобы включить эту функцию, вам необходимо использовать

<meta name="apple-mobile-web-app-capable" content="yes">

В iOS6 и 7 это работает более или менее, как ожидалось.

В iOS8 это, кажется, полностью сломано. Например, iOS 8.0.2, работающий на iPad Air в портрете, имеет следующее поведение:

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

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

На iPhone6 панель состояния вообще не отображается в ландшафте. В портрете, однако, следующее поведение:

black работает как ожидалось, а контент сбрасывается вниз (ничего себе!!!)
default имеет пустую белую полосу вверху
black-translucent приводит к прозрачному фону с содержимым под

У меня не было возможности протестировать iPhone4 +

Симулятор iOS в xcode, похоже, не дает надежного воспроизведения поведения, которое происходит на реальных устройствах.

Я попытался изменить его динамически с помощью javascript, но он, похоже, не имеет эффекта.

Чтобы сделать это еще более интересным/разочаровывающим, вы можете ЗАКРЫТЬ строку состояния (часы/wifi и т.д.), установив стили в элементе html. например.

  html {background: black;}
  body {background: #DDD; margin-top: 20px}

Тот же самый вопрос описан в другом месте:

https://discussions.apple.com/thread/6557230?start=0&tstart=0

Ответ 3

Проблема существовала с iOS6. Ранее я опубликовал отчет об ошибке Apple со всеми подробностями, которые вы предоставляете сегодня, а затем был отмечен как дубликат. Это было 2 года назад и, к сожалению, сегодня я обнаружил, что это стало даже хуже.

Исходный отчет об ошибке имеет идентификатор 11966202 и по-прежнему (открыт). Поскольку у вас есть одна и та же проблема, единственное, что вы можете сделать, это подтвердить ошибку, которая будет ее эскалировать, и они исправит ее в будущем.

Как я уже сказал, я ищу решение для более того, чтобы сказать вам, что нет обходного пути. Проблема может быть воспроизведена на всех устройствах iOS, но ведет себя по-разному в зависимости от размера экрана и ориентации.

С iOS 8 теперь мы сталкиваемся с сбоем, когда область просмотра становится очень маленькой частью экрана и полностью закрывается/падает.

ИЗМЕНИТЬ: Apple Ticket теперь закрыт

По состоянию на понедельник Apple закрыла билет, и я могу подтвердить, что с помощью 8.1 наконец разрешится проблема с камерой и статусом, которые у меня возникли. Надеюсь, он также разрешил ваши проблемы:)

Ответ 4

Проблема возникает из-за использования <meta name="apple-mobile-web-app-status-bar-style" content="black"> Чтобы избавиться от черной полосы в нижней части приложения, вам нужно будет использовать: <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> Использование black-translucent будет поддерживать ваше приложение одинаково в iOS7 и iOS8. Вам все равно нужно настроить любой контент в верхней части приложения, чтобы очистить значки строки состояния iOS.

Ответ 5

Чтобы развернуть все вышеизложенное, мое решение:

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

Затем создайте собственный CSS для всех элементов, которые нужно сдвинуть на 20 пикселей, в частности, любой position: fixed; top: 0px;, который существует в вашем CSS для обычного просмотра браузера [desktop/mobile].

Добавьте пользовательский CSS в раздел заголовка ниже ссылок CSS со следующим script [мой рабочий пример]

<script type="text/javascript">
   if (window.navigator.standalone) {
       document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"assets/css/style-body-ios8.css\" charset=\"utf-8\" \/>");
}
</script>

Мой результат - просмотр веб-сайта на рабочем столе/мобильном браузере, как обычно, затем веб-сайт добавлен на главный экран в качестве веб-приложения, при запуске открывается полноэкранный режим, со статусной строкой, похожей на предыдущую iOS8 [fyi, я добавил цвет фона черного в мой фиксированный заголовок css для строки состояния, отображаемой как черный фон

Протестировано на iPad/iPhone/iPod под управлением ios 8.0.2 - все хорошо. FYI, протестированный на старом iPod ios 6.1.6, ожидающий дополнительной смены 20px и не был там - бонус!

Ответ 6

Следует отметить, что установка стиля строки состояния на "черный" работает так, как ожидалось, пока вы открываете веб-приложение со своим iPad в портрете. Тогда даже если вы повернете iPad, черная полоса будет видна правильно.

Проблема заключается только в том, что вы вводите веб-приложение в ландшафт, по крайней мере для меня. Я использую iPad 3 с IOS 8.1, и я считаю, что он все тот же в 8.3

Ответ 7

Просто добавьте 20px high div в верхнюю часть вашего приложения и пусть это будет действовать как эта строка состояния

Ответ 8

apple-mobile-web-app-status-bar-style неактивен в iOS 8. Если вы добавите фиксированный div сверху, добавьте его только для OS 8_0

if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...