Javascript PWA iOS恼人的20px横向间隙_Javascript_Ios_Progressive Web Apps

Javascript PWA iOS恼人的20px横向间隙

javascript ios

Javascript PWA iOS恼人的20px横向间隙,javascript,ios,progressive-web-apps,Javascript,Ios,Progressive Web Apps,我正在开发PWA网站。应用程序必须通过点击主屏幕图标启动。问题在于将iphone旋转到横向位置后出现的20px间隙。这个间隙是窗口外对象，所以我不能用js或css处理它。这似乎是状态栏的保留区域。 Bug只出现在iOS上（除了iphone X、XR和类似产品）是否有可能管理这一差距？谢谢附加一些截图附加index.html <html> <head> <link rel="manifest" href="manifest.webmanifest"

我正在开发PWA网站。应用程序必须通过点击主屏幕图标启动。问题在于将iphone旋转到横向位置后出现的20px间隙。这个间隙是窗口外对象，所以我不能用js或css处理它。这似乎是状态栏的保留区域。 Bug只出现在iOS上（除了iphone X、XR和类似产品）

是否有可能管理这一差距？谢谢

附加一些截图附加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>

元标记

在元标记中，视口设置为：

这其中的关键部分是

viewport fit=cover

，因为默认设置为“自动”，将其设置为覆盖整个空间

使用CSS的安全区域

您还使用CSS设置了“安全区域”：

填充：env（安全区域插图顶部）env（安全区域插图右侧）env（安全区域插图底部）env（安全区域插图左侧）
安全区域定义了不被屏幕形状遮挡的空间。当您将视口设置为覆盖时，它将填充整个屏幕，并且可能会根据设备切断内容。
Meta-Tag
在元标记中，视口设置为：

这其中的关键部分是viewport fit=cover
，因为默认设置为“自动”，将其设置为覆盖整个空间
使用CSS的安全区域
您还使用CSS设置了“安全区域”：
填充：env（安全区域插图顶部）env（安全区域插图右侧）env（安全区域插图底部）env（安全区域插图左侧）
安全区域定义了不被屏幕形状遮挡的空间。当您将视口设置为覆盖时，它将填充整个屏幕，并且可能会根据设备切断内容。
这不是解决方案，但您可以强制将方向设置为纵向，还是需要它在横向中工作？应用程序是一个游戏，因此，在用户将设备旋转到横向之前，它不会以纵向模式启动。在元标记中，视口是否设置为
？还可以使用CSS设置“安全区域”：填充：env（安全区域插入顶部）env（安全区域插入右侧）env（安全区域插入底部）env（安全区域插入左侧）？只有几件事让我觉得很棒！后来有了填充的解决办法，但似乎还不够。把你的评论作为一个答案，希望这对其他人有所帮助！它张贴在回答区域这不是解决方案，但您可以强制方向为纵向，还是需要它在横向中工作？应用程序是一个游戏，因此在用户将设备旋转到横向之前，它不会在纵向模式下启动。在元标记中，视口是否设置为
？还可以使用CSS设置“安全区域”：填充：env（安全区域插入顶部）env（安全区域插入右侧）env（安全区域插入底部）env（安全区域插入左侧）？只有几件事让我觉得很棒！后来有了填充的解决办法，但似乎还不够。把你的评论作为一个答案，希望这对其他人有所帮助！它张贴在已回复的区域谢谢，这很有效！！谢谢，成功了！！
{
  "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"
}