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

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

header.scss footer.scss

---

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

---

如果您实现了PWA，则可以通过在web清单文件中设置

显示

属性来指定在浏览器中呈现PWA的方式

我写了一篇文章详细解释了应用程序的功能和外观

在您的情况下，我将使用

display:standalone

，因为它将删除地址栏并在单独的窗口中打开应用程序（与浏览器使用的窗口不同）

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

如果这不起作用，因为iOS提供了糟糕的PWA支持，您可以：

添加

标记

或

使用

pwacompat

---

是的，我添加了这个，这只有在用户从浏览器按add to home screen时才有用。这个问题并不是PWAs独有的，只是响应性的网页设计。您可以尝试通过调用

窗口来模拟全屏。scrollTo（0,1）

，但iOS Safari没有本机全屏API调用。尝试了所有操作，但仍然相同如果您访问浏览器开发工具，您是否可以看到服务人员已正确安装且web清单没有任何警告？不，没有。如果我把它添加到主屏幕上，效果会非常好

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

  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)