mobile - 在移动浏览器上隐藏地址/导航栏而不需要滚动内容?
问题描述
一段时间以来,我一直在制作和维护一个 web 应用程序,它具有全屏单页设计,并在单独的容器中显示项目列表,因此没有通常会触发地址和导航栏的经典滚动行为隐藏在 Safari 和 Chrome 等移动浏览器上。因此,在智能手机浏览器上使用此 Web 应用程序时,顶部地址栏和底部导航栏始终可见。在 5 英寸以上的大型手机上这不是什么大问题,但是当应用程序在 iPhone SE 等较小的设备上使用时,这几百像素会产生很大的不同。
有一段时间我觉得这是一个无法避免的问题,就忍了,但最近我看到有人在 iOS 的 Chrome 上使用谷歌地图网页版,点击某个地址时,导航栏和地址栏消失了,它看起来像一个真正的全屏应用程序。所以这意味着有一种方法可以模拟滚动类型的事件,使移动浏览器隐藏导航栏。
关于如何做到这一点的任何想法/经验?
解决方案
您是否尝试过全屏显示而不是隐藏地址栏?我知道 Chrome Firefox 和其他浏览器支持这一点,它会以不同的方式实现你想要做的事情。我不确定 safari 是否有类似的东西。
我认为当用户遇到页面时强制“全屏模式”可能是一个选项,如下所述:
https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
这不需要滚动来启动地址栏从消失,但它可能需要用户从提示启用全屏使用requestFullscreen()
只是一个想法,希望这会有所帮助。
推荐阅读
- python - Python为什么我必须重新分配给变量
- javascript - 我可以从 JSON 文件中检索数据,但无法添加
- mongodb - 如何查询两个集合?
- java - 如何从java中的csv文件中删除某些字符串?
- c# - 如何将此 T-SQL 查询转换为 lambda 或 C# 中的查询语法
- emscripten - 为什么在 WebAssembly 中 ALLOW_MEMORY_GROWTH=1 失败而 TOTAL_MEMORY=512MB 成功?
- c - 删除节点会给已分配值的节点带来问题,为什么?为什么我不能在打印功能中更改节点值?
- swift - 如何在 Swift 中从文件(而不是整个文件)中读取数据块
- python-3.x - 如何将 text.concordance 附加到变量列表?
- javascript - 如何使 for 循环中的事件侦听器每次单击将一项推送到数组