PWA IOS：身体的孩子没有占据 100% 的高度，底部有间隙答案

【问题标题】：PWA IOS: Child of body not taking 100% height, gap on bottomPWA IOS：身体的孩子没有占据 100% 的高度，底部有间隙
【发布时间】：2021-02-02 07:57:46
【问题描述】：

我正在尝试制作一个 Web 应用程序，使用 Angular 在 IOS 上制作一个独立的 PWA，同时使用 viewport-fit = cover 元标记。我的 CSS 如下所示：

body {
  width: 100%;
  height: 100vh;
  background: blue;
}
.test{
  background: red;
  height: 100%;
  width: 100%;
}

如您所见，理想情况下整个屏幕应该是红色的，但无论我做什么，底部总是有一个间隙。我什至尝试为测试 div 添加填充，但差距并没有消失。不要仅在使用 safari 上的“添加到主屏幕”安装网络应用程序后才会出现此问题。

【问题讨论】：

也许你可以在这里试试这个答案stackoverflow.com/a/56724839/1101930
是的，我试过了，没用。

标签： javascript html css progressive-web-apps

【解决方案1】：

viewport-fit=cover 标记使用起来有点麻烦，但这是我为使您的代码正常工作所做的：

在<head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">    
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在<body>：

<body>
  <div class="test"> 
  </div>
</body>

在style.css：

body {
  width: 100%;
  height: 100vh;
  background-color: blue;
}

.test {
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  height: 100vh;
  width: 100vw;
}

您可以在https://glitch.com/edit/#!/neon-wirehaired-egg?path=index.html 上查看完整代码，在https://neon-wirehaired-egg.glitch.me/ 上运行所有代码，Apple 在https://webkit.org/blog/7929/designing-websites-for-iphone-x/ 上有更多信息

【讨论】：

谢谢，我最初遇到了一些问题，但事实证明我已经在 html 标签中添加了位置固定以“删除”pwa 附带的苹果弹性滚动效果，这也导致了我有一些麻烦要解决。