带有黑色半透明状态栏的 iPhone 上的 WebApp：视口高度似乎是错误的

Question

我目前遇到的问题是，当我使用状态栏样式black-translucent时，我的 iPhone 没有将内容显示到网络应用程序的屏幕底部。

底部总是有一个缺口。

我使用一个简单的页脚栏创建了一个最小的示例来演示它：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <style> body { background-color: DarkGray; } #footer { position: fixed; left: 0; bottom: 0; width: 100%; height: 54px; background-color: DimGray; } </style> <title>Test</title> </head> <body> <div id="content"></div> <div id="footer"></div> </body> </html>

该问题仅在 iPhone 纵向出现，并且仅在将应用程序保存到主屏幕时才会出现，因此它会全屏运行。 桌面浏览器也可以正确呈现页面。

这是它在 iPhone 上的外观截图（通常较深的灰色条应直接位于底部）：

知道这里到底发生了什么以及如何解决吗？

Answer 1

好的，似乎只有当页面内容没有垂直填充整个空间直到页脚时才会发生这种情况。

一些用于放大内容的 CSS 将解决此问题：

#content {
    min-height: 100vh;
    padding-bottom: 54px;
}

Answer 2

在解决这个问题几天后，我发现了一些可能的原因：
就我而言，仅在 ios 13.4.1 上就有问题。
我的 PWA 与登录名位于不同的站点，重定向导致了此问题。
example.loginsite.com / example.myapp.com
底部的边框是一个带有“完成”按钮的栏：

要解决此问题，只需将清单添加到您的 PWA。

其他原因可能与苹果为 iPhone x、iPhone xs 等无边框显示器创建的“安全区”有关。
要解决此问题，需要使用变量 (-safe-area-init-*)，其中 * 是顶部、右侧、底部、左侧。

希望这个答案对谁在与这种奇怪的行为作斗争有帮助。

带有黑色半透明状态栏的 iPhone 上的 WebApp：视口高度似乎是错误的

问题描述

2 个解决方案

解决方案1
0 2020-01-20 21:51:55

解决方案2
0 2020-05-07 07:42:40

带有黑色半透明状态栏的 iPhone 上的 WebApp：视口高度似乎是错误的

问题描述

2 个解决方案

解决方案1 0 2020-01-20 21:51:55

解决方案2 0 2020-05-07 07:42:40

解决方案1
0 2020-01-20 21:51:55

解决方案2
0 2020-05-07 07:42:40