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

Question

移动设备上的

Safari 和 Chrome 在页面加载时都包含可见的地址栏。当页面正文滚动时，URL 栏最小化:

我的项目基于 React JS，我试图在页面加载时实现此结果（因此不需要用户交互，页面需要在 URL 栏最小化的情况下加载。我的网络应用程序由 single 组成 且无法滚动（类似于 Google 地图的应用程序）。

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

Answer 2

在 iOS 上有一个 hack 可以做到这一点，但不是以编程方式。

在 Safari 中，访问网站
单击向上箭头框图标，然后选择
2. Add to Home Screen
用于应用程序的图标将从
3. favicon.ico

    或公共文件夹中的其他图标中获取。您无法手动更改图标，只能更改名称。

现在图标位于主屏幕上，并且 safari 不会打开导航控件
利润...