PWA IOS：body 的 Child 未占用 100% 高度，底部有间隙

Question

我正在尝试制作一个网络应用程序，使用 angular 在 IOS 上制作独立的 PWA，同时使用 viewport-fit = cover 元标记。我的 CSS 看起来像这样：

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

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

Answer 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 and everything running at https://neon-wirehaired-egg.glitch.me/ and Apple has more info on https://webkit.org/blog/7929/designing-websites-for-iphone-x/

查看完整代码

PWA IOS：body 的 Child 未占用 100% 高度，底部有间隙

PWA IOS: Child of body not taking 100% height, gap on bottom

html

javascript

css

progressive-web-apps