Question

我正在开发PWA网站。必须通过单击主屏幕图标来启动应用程序。问题是将iphone旋转到横向位置后出现20px的间隙。这个间隙超出了Window对象，因此我无法使用js或css处理它。好像是状态栏的保留区。错误仅在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>

也是我的清单文件

{
  "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"
}

Answer 1

元标记

在meta标签中，视口设置为：

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

其中的关键部分是viewport-fit = cover，默认值为自动，方法是将其设置为覆盖整个空间。

使用CSS的安全区域

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

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

安全区域定义了不会被屏幕形状遮挡的空间。当您将视口设置为覆盖视口时，它会填满整个屏幕，并可能会根据设备截断内容。

PWA iOS在横向上令人讨厌的20px差距

1 个答案: