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

Mobile 在移动浏览器上隐藏地址/导航栏而无需滚动内容?,mobile,scroll,Mobile,Scroll,一段时间以来,我一直在制作和维护一个web应用程序,它具有全屏单页设计,并在单独的容器中显示项目列表,因此没有典型的滚动行为通常会触发地址和导航栏在Safari和Chrome等移动浏览器上隐藏。因此,在智能手机浏览器上使用此web应用时,顶部地址栏和底部导航栏始终可见。对于5英寸以上的大型手机来说,这不是一个大问题,但当一个应用程序在诸如iPhone SE这样的小型设备上使用时,这几百个像素会产生很大的不同 一段时间以来,我一直认为这是一个不可避免的问题,只是忍无可忍,但最近我看到有人在iOS的

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

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


关于如何做到这一点,您有什么想法/经验吗?

您是否尝试过全屏显示而不是隐藏地址栏?我知道Chrome Firefox和其他浏览器都支持这一点,它将以不同的方式实现您的目标。我不确定safari是否有类似的东西

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

这不需要滚动来启动地址栏的消失,但可能需要用户使用
requestFullscreen()


这只是一个想法,希望能有所帮助。

这是android应用程序还是web应用程序