【问题标题】：Hide mobile browser's address bar on load (IOS / Android) in React在 React 中隐藏移动浏览器的地址栏加载（IOS / Android）
【发布时间】：2020-07-01 00:47:09
【问题描述】：

移动设备上的

Safari 和 Chrome 都包含在页面加载时可见的地址栏。随着页面正文的滚动，URL 栏缩小：

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

到目前为止我尝试过的（在 iPhone X 上）：

manifest.json > "display": "standalone" > 这使得 URL 栏只有在页面保存到主页时才会消失（不是一个好的选择）
window.scrollTo(0, 1);在 index.js 中（所以它在加载时被调用），没有发生任何事情，可能只触发 onScroll，但我不能这样做。

参考：https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

【问题讨论】：

我认为您尝试做的事情是不可能的，至少在 Mobile Safari 中是不可能的。苹果在围墙花园中保存页面做得很好，这是有充分理由的。我认为按照建议接管用户的默认浏览器控件可见性状态将是一种侵入性的 UX。全屏原生体验是为用户安装的应用程序保留的特权。相反，我会围绕移动浏览器设置的最大可用视口空间来设计您的网络应用程序，这是谷歌地图、必应地图等为其网络版本所做的。他们满足于始终可见的浏览器 UI。
谷歌地图做了这样的事情：html, body, { width: 100%; height: 100%; } body { margin: 0; overflow: hidden; } 在不滚动的情况下占用最大的空间，它们似乎有一些与地图画布相关的逻辑来拦截触摸事件，因此页面不会出现橡皮擦-band 除非用户从不拦截触摸事件的页面部分拖动。
如前所述，这几乎肯定是不可能的——老实说，这可能是最好的。我不想让一个网站来决定我的浏览器控件是否可见（你能想象是否有任何 ol 诈骗网站可以永久隐藏你的底部浏览器控制栏？Blegh。）
这能回答你的问题吗？ How to hide a mobile browser's address bar?
我不知道它是否有帮助，但是您可以在 Android 上通过将您的 webApp 包装在 webview 中来实现这一点，然后选择是否从嵌入式浏览器中显示您想要的功能。从未使用过本机反应 - 但如果你提升自己的系统浏览器，它应该是可能的。对苹果一无所知

标签： javascript html reactjs url mobile

【解决方案1】：

对于 Safari：

<meta name="apple-mobile-web-app-capable" 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 的。

【讨论】：

我没有投反对票，但这对我不起作用。我在带有 android 9+chrome/firefox 和 iphone 5+safari 的 https 网站上进行了尝试。
1) 问题不是在全屏模式下运行。请参阅问题的粗体部分。它只是以编程方式最小化 URL 栏，就像滚动时一样。 2) 你说的是 PWA。在这里，这是人们登陆的正常页面。突然全屏显示需要用户同意。

【解决方案2】：

这不会发生，这违反了开发人员对浏览器的正确使用。只有当您的网站受到保护或注册了域而不是自动注册时，您才能获得此功能！

【讨论】：