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

Question

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

966*_*66p 1 javascript ios progressive-web-apps

我正在开发 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>

Run Code Online (Sandbox Code Playgroud)

还有我的清单文件

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*ron 5

元标签

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

<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);

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

归档时间：	6 年，2 月前
查看次数：	1400 次
最近记录：	6 年，2 月前