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

Hide mobile browser's address bar on load (IOS / Android) in React

提问人：Dino Pizza 提问时间：3/20/2020 更新时间：8/25/2023 访问量：19348

问：

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

enter image description here

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

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

  1. manifest.json > “display”： “standalone” > 这使得 URL 栏仅在页面保存到主页时消失（不是一个好的选择）
  2. 窗口.scrollTo（0， 1）;在 index.js 中（所以它在加载时被调用），什么也没发生，也许只触发 onScroll，但我不能这样做。

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

JavaScript HTML ReactJS URL 移动

评论

2赞 Aaron Sarnat 7/23/2021
我不认为你想做的事情是可能的，至少在Mobile Safari中是不可能的。苹果在将页面保存在围墙花园中做得很好，这是有充分理由的。我认为，按照建议接管用户的默认浏览器控件可见性状态将是一种侵入性的用户体验。全屏本机体验是为用户安装的应用程序保留的特权。相反，我会围绕移动浏览器设置的最大可用视口空间来设计您的 Web 应用程序，这就是 Google 地图、必应地图等为其 Web 版本所做的。他们满足于浏览器 UI 始终可见。
2赞 Aaron Sarnat 7/23/2021
谷歌地图是这样的：在不滚动的情况下占用最大的空间，它们似乎有一些逻辑与地图画布相关联，以拦截触摸事件，因此除非用户从页面中拖动部分，否则页面不会橡皮筋没有拦截触摸事件。html, body, { width: 100%; height: 100%; } body { margin: 0; overflow: hidden; }
2赞 Joel Rummel 7/24/2021
如前所述，这几乎肯定是不可能的——老实说，这可能是最好的。我讨厌一个网站来决定我的浏览器控件是否可见（你能想象如果任何一个骗局网站可以永久隐藏你的底部浏览器控制栏吗？咩。
0赞 Spectric 7/25/2021
这回答了你的问题吗？如何隐藏移动浏览器的地址栏？
0赞 JoelBonetR 7/26/2021
我不知道它是否有帮助，但您可以在 Android 上实现这一点，方法是将 webApp 包装在 webview 中，然后选择是否从嵌入式浏览器中显示您想要的功能。从未使用过 react native - 但如果你提出自己的系统浏览器，它应该是可能的。对苹果一无所知

答：

0赞 Aditya Thakkar 7/27/2021 #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。

评论

0赞 wlf 7/28/2021
我没有投反对票，但这对我不起作用。我在 https 网站上尝试了 android 9+Chrome/Firefox 和 iPhone 5+Safari。
2赞 Aidin 12/6/2021
1）询问不是关于在全屏模式下运行。请参阅问题的粗体部分。它只是以编程方式最小化 URL 栏，就像滚动时发生的方式一样。2） 您正在谈论 PWA。在这里，这是人们登陆的正常页面。突然进入全屏需要用户同意。
-5赞 Lacrosse343 3/2/2022 #2

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

  1. 在 Safari 中，转到网站
  2. 单击向上箭头框图标，然后选择Add to Home Screen
  3. 用于应用程序的图标将从公用文件夹中的图标中获取。您无法手动更改图标，只能更改名称。favicon.ico
  4. 现在图标在主屏幕上，Safari不会打开导航控件
  5. 利润。。。

上一个：使用 Phonegap 为 Android 提供实时视频流？

下一个：如何在新 Chrome 中打印 html 时打印页码？