如何在滾動條上隱藏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屬性來指定在瀏覽器中呈現的方式。

我寫了一篇文章，詳細解釋了不同的顯示值以及應用程序的外觀。

在您的情況下，我將使用display: standalone ，因為它將刪除地址欄並在單獨的窗口中打開應用程序（與瀏覽器所用的窗口不同）。

布局如下所示（請注意，沒有地址欄）：

如果這不起作用，則因為iOS具有糟糕的PWA支持，您可以：

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

要么

2. 使用pwacompat 庫