在 React 中隐藏移动浏览器的地址栏（IOS / Android）

Question

移动设备上的Safari和Chrome在页面加载时都包含一个可见的地址栏。当页面主体滚动时，URL 栏会最小化：

我的项目是基于阵营JS，我想实现在页面加载这个结果（因此，没有用户交互的需要，页面需要加载与最小地址栏。我的web应用程序是用的单页，并没有滚动是可能的（类似于谷歌地图的应用程序）。

到目前为止我尝试过的（在 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

对于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

对于 Chrome：

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

它与上面的功能相同，但是，这是针对 android 的，而上面的则是针对 ios 的。