带有黑色半透明状态栏的 iPhone 上的 Web 应用程序：视口高度似乎是错误的
Posted
技术标签:
【中文标题】带有黑色半透明状态栏的 iPhone 上的 Web 应用程序：视口高度似乎是错误的【英文标题】：WebApp on iPhone with black-translucent StatusBar: Viewport height seems to be wrong 【发布时间】：2020-01-20 12:51:16 【问题描述】：我目前遇到的问题是，当我使用状态栏样式black-translucent 时，我的 iPhone 没有将内容显示到 Web 应用程序的屏幕底部。
底部总是有空隙。
我使用一个简单的页脚栏创建了一个最小的示例来演示它：
<!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 上的屏幕截图（通常深灰色条应直接位于底部）：
知道这里到底发生了什么以及如何解决它吗？
【问题讨论】：
【参考方案1】：好的，似乎只有当页面内容没有垂直填充整个空间直到页脚时才会发生这种情况。
一些扩大内容的 CSS 可以解决这个问题：
#content
min-height: 100vh;
padding-bottom: 54px;
【讨论】：
【参考方案2】：在解决这个问题几天后，我发现了一些可能的原因： 就我而言，这是 ios 13.4.1 上的问题。 我的 PWA 与登录位于不同的站点上，并且重定向导致了此问题。 example.loginsite.com / example.myapp.com 底部的边框是一个带有“完成”按钮的栏：
要解决此问题，只需将清单添加到您的 PWA。
其他原因可能与苹果为 iPhone x、iPhone xs 等无边框显示器创建的“安全区域”有关。 要解决这个问题，需要使用变量 (-safe-area-init-*)，其中 * 是上、右、下、左。
希望这个答案对正在与这种奇怪行为作斗争的人有所帮助。
【讨论】：
以上是关于带有黑色半透明状态栏的 iPhone 上的 Web 应用程序：视口高度似乎是错误的的主要内容，如果未能解决你的问题，请参考以下文章