在移动浏览器上隐藏地址/导航栏而不需要滚动内容？

Posted 2023-02-24

【中文标题】在移动浏览器上隐藏地址/导航栏而不需要滚动内容？

【英文标题】：Hide address/navigation bar on mobile browsers without the need to scroll content?

【发布时间】：2019-04-02 11:49:15

【问题描述】：

一段时间以来，我一直在制作和维护一个网络应用程序，它具有全屏单页设计，并在单独的容器中显示项目列表，因此没有通常会触发地址和导航的经典滚动行为在 Safari 和 Chrome 等移动浏览器上隐藏的栏。因此，在智能手机浏览器上使用此 Web 应用程序时，顶部地址栏和底部导航栏始终可见。在 5 英寸以上的大型手机上这不是什么大问题，但是当应用在 iPhone SE 等较小的设备上使用时，这几百像素会产生很大的不同。

有一段时间我认为这是一个无法避免的问题，只是忍受它，但最近我看到有人在 ios 的 Chrome 上使用谷歌地图网页版，并且在点击某个地址时，导航栏和地址栏消失了，它看起来就像一个真正的全屏应用程序。所以这意味着有一种方法可以模拟滚动类型的事件，使移动浏览器隐藏导航栏。

关于如何做到这一点的任何想法/经验？

【问题讨论】：

这是安卓应用还是网页应用

【参考方案1】：

您是否尝试过全屏显示而不是隐藏地址栏？我知道 Chrome Firefox 和其他浏览器支持这一点，它会以不同的方式实现你想要做的事情。我不确定 safari 是否有类似的东西。

我认为当用户遇到页面时强制“全屏模式”可能是一种选择，如下所述：

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

这不需要滚动来启动地址栏消失，但它可能需要用户使用requestFullscreen()从提示启用全屏

只是一个想法，如果有帮助的话，希望能有所帮助。