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

本文介绍了PWA iOS 令人讨厌的 20px 横向差距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发 PWA 网站.必须通过单击主屏幕图标来启动应用程序.问题是将 iphone 旋转到横向位置后出现的 20px 间隙.这个差距超出了 Window 对象，所以我无法用 js 或 css 处理它.好像这是状态栏保留区.错误仅出现在 iOS 上(iphone X、XR 和类似产品除外).

I'm developing PWA website. Application must be started by clicking on home screen icon.The problem is 20px gap that appears after rotating iphone into landscape position. This gap is out of Window object so I cant handle it with js or css. Seems like this is status bar reserved area.Bug appears only on iOS (except iphone X, XR and similar).

是否有可能管理差距?谢谢！

Is it possible to manage the gap?Thanks!

附上一些截图附上 index.html

Attaching some screenshotsAttaching 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"
}

推荐答案

Meta Tag

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

In the meta tags is the viewport set to:

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

其中的关键部分是 viewport-fit = cover 作为默认值是自动，通过将其设置为覆盖它填充整个空间.

The key part of this is the viewport-fit = cover as the default is auto, by setting it to cover it fills the whole space.

使用 CSS 的安全区域

您是否还使用 CSS 设置了安全区域":

Also have you set the "safe area" using CSS:

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

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

The safe area defines the space that is not obscured by the shape of the screen. When you set the viewport to cover it'll fill the whole screen and may cut content off depending on device.

                        这篇关于PWA iOS 令人讨厌的 20px 横向差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！