WebApp на iPhone с черным полупрозрачным StatusBar: высота области просмотра, кажется, неправильно - PullRequest
Новая
       44

WebApp на iPhone с черным полупрозрачным StatusBar: высота области просмотра, кажется, неправильно

0 голосов
/ 20 января 2020

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

Всегда есть пробел внизу.

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

  <style>
    body {
      background-color: DarkGray;
    }
    
    #footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 54px;
      background-color: DimGray;
    }
  </style>

  <title>Test</title>
</head>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Проблема возникает только на iPhone только в книжной ориентации и только при сохранении приложения на домашнем экране, поэтому оно работает в полноэкранном режиме. Настольные браузеры также корректно отображают страницу.

Вот снимок экрана, показывающий, как она выглядит на iPhone (обычно более темная серая полоса должна находиться непосредственно внизу): Screenshot

Есть идеи, что именно здесь происходит и как это решить?

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

После нескольких дней разрыва с этой проблемой я нашел несколько возможных причин:
В моем случае была проблема только на ios 13.4.1.
Мой PWA был на другом сайте из логина и перенаправления вызвало эту проблему.
example.loginsite.com / example.myapp.com
Граница внизу была полосой с кнопкой «сделано»:

enter image description here

Чтобы решить эту проблему, просто добавьте манифест в свой PWA.

Другие причины могут быть связаны с «безопасной областью», созданной яблоком для дисплеев без границ, например iPhone x, iPhone xs и т. Д.
Для решения этой проблемы необходимо использовать переменные (-safe-area-init- *), где * - это верх, правый, нижний, левый.

Надеюсь, этот ответ поможет тем, кто борется с этим странным поведением.

0 голосов
/ 21 января 2020

Хорошо, похоже, это происходит только тогда, когда содержимое страницы не заполняет все пространство вертикально до нижнего колонтитула.

Некоторые CSS для увеличения содержимого исправят это: 

#content {
    min-height: 100vh;
    padding-bottom: 54px;
}
...