在移动浏览器中隐藏地址/导航栏而无需滚动内容?

时间:2019-04-02 11:49:15

标签: mobile scroll

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

一段时间以来,我认为这是一个不可避免的问题,只是忍受了,但最近我看到有人在iOS的Chrome浏览器中使用Google Maps Web版本,然后点击某些地址,导航栏和地址栏就消失了,它看起来像一个真正的全屏应用程序。因此,这意味着有一种方法可以模拟滚动类型的事件,该事件将使移动浏览器隐藏导航栏。

关于如何执行此操作的任何想法/经验?

1 个答案:

答案 0 :(得分:2)

您是否尝试过全屏显示,而不是隐藏地址栏?我知道Chrome Firefox和其他浏览器都支持此功能,它将以另一种方式实现您要执行的操作。我不确定Safari是否有类似的东西。

我认为,当用户遇到页面时强制“全屏模式”是一种选择,如此处所述:

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

这不需要滚动即可启动地址栏消失,但可能需要用户使用requestFullscreen()从提示中启用全屏显示

只是一个主意,希望这能有所帮助。