angular - 如何在滚动时隐藏 IOS Safari 地址栏？

Question

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

头文件.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;

页脚.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

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

我写了一篇文章详细解释了不同的显示值以及应用程序的外观。

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

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

如果这不起作用，因为 iOS 对 PWA 的支持很糟糕，你可以：

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

或者

2. 使用pwacompat 图书馆