如何在滚动条上隐藏IOS Safari地址栏？

Question

我正在构建PWA，发现很难在滚动时隐藏IOS Safari导航栏（地址栏），我尝试了所有可用的解决方案，但不幸的是，没有任何帮助。是否有任何方法可以在滚动iPhone（IOS 7+）野生动物园时隐藏地址栏？

header.scss

display: flex;
padding: 0 16px;
width: 100%;
align-items: center;
color: white;
position: absolute;
background-color: #353f50;
top: 0;
height: 64px;
z-index: 2;

footer.scss

  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;```

router-outlet content has height: calc(100vh-64px)

Current output:
![Current](https://i.imgur.com/mapbX0i.jpg)

Expected:
![Expected](https://i.imgur.com/eCbCUUI.jpg)

Answer 1

将此元标记添加到index.html的头部

<meta name="apple-mobile-web-app-capable" content="yes">

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Answer 2

如果实现了PWA，则可以通过在Web清单文件中设置display属性来指定在浏览器中呈现的方式。

我写了一篇文章，详细说明了different display values以及应用程序的外观。

在您的情况下，我将使用display: standalone，因为它将删除地址栏并在单独的窗口中打开应用程序（浏览器所使用的窗口与此不同）。

布局如下所示（请注意没有地址栏）：

如果这行不通，因为iOS具有糟糕的PWA支持，您可以：

1. 添加<meta name="apple-mobile-web-app-capable" content="yes">标签

或

1. 使用pwacompat library