在 React 中隱藏移動瀏覽器的地址欄（IOS / Android）

Question

移動設備上的Safari和Chrome在頁面加載時都包含一個可見的地址欄。 當頁面主體滾動時，URL 欄會最小化：

我的項目基於React JS，我試圖在頁面加載時實現這個結果（因此不需要用戶交互，頁面需要在URL 欄最小化的情況下加載。我的網絡應用程序由單個頁面組成，無法滾動（類似於谷歌地圖的應用程序）。

到目前為止我嘗試過的（在 iPhone X 上）：

1. manifest.json > "display": "standalone" > 這使得 URL 欄只有在頁面保存到主頁時才會消失（不是一個好選擇）
2. window.scrollTo(0, 1) ; 在 index.js 中（所以它在加載時被調用），什么也沒有發生，可能只觸發 onScroll，但我不能那樣做。

參考資料： https : //developers.google.com/web/fundamentals/native-hardware/fullscreen/

Answer 1

這不會發生，這不利於開發人員正確使用瀏覽器。 只有當您的網站受到保護或注冊了域時，您才能獲得此功能，而不是自動獲得！

Answer 2

對於 Safari：

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

如果 content 設置為 yes，則 Web 應用程序以全屏模式運行。 來源： https : //developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

對於鉻：

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

它和上面的做同樣的事情，但是，這是針對 android 的，上面是針對 ios 的。