在 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 的。