PWA iOS раздражает разрыв в 20 пикселей на ландшафте - PullRequest
Новая
       25

PWA iOS раздражает разрыв в 20 пикселей на ландшафте

0 голосов
/ 23 июня 2019

Я занимаюсь разработкой сайта PWA. Приложение должно быть запущено нажатием на иконку главного экрана. Проблема заключается в разрыве в 20 пикселей, который появляется после поворота iphone в горизонтальное положение. Этот пробел находится вне объекта Window, поэтому я не могу справиться с ним с помощью js или css. Похоже, это зарезервированная область строки состояния. Ошибка появляется только на iOS (кроме iphone X, XR и аналогичных).

Можно ли управлять разрывом? Спасибо!

Прикрепление некоторых скриншотов 2px gap Прикрепление index.html 

<html>
<head>
    <link rel="manifest" href="manifest.webmanifest" />   
</head>
<body style="background: red; min-height: 100vh;">
</body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/pwacompat.min.js" integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc" crossorigin="anonymous"></script> <-- manifest generator -->

</html>

также мой файл манифеста 

{
  "short_name": "app1",
  "name": "app11",
  "icons": [
    {
      "src": "/i/icon-128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/i/icon-256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "/i/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#3367D6",
  "display": "fullscreen", // nothing changes with 'standalone' value
  "orientation": "landscape",
  "scope": "/",
  "theme_color": "#3367D6"
}

1 Ответ

1 голос
/ 23 июня 2019

метатег

В метатегах для окна просмотра установлено значение:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Ключевой частью этого является viewport-fit = cover в качестве значения по умолчанию - auto, установив его на покрытие, оно заполняет все пространство.

Безопасная область с использованием CSS

Также вы задали «безопасную область»используя CSS:

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Безопасная область определяет пространство, которое не скрыто формой экрана.Когда вы установите область просмотра на весь экран, он заполнит весь экран и может обрезать содержимое в зависимости от устройства.

...