Webapp 在 Chrome 中隐藏 Android 导航栏(虚拟后退、主屏幕等按钮)(通过 javascript)

Rok*_*vak 8 javascript android web-applications fullscreen

我正在制作一个网络应用程序,并希望创造一个真正的全屏体验。对于 Android,这包括隐藏顶部的 Chrome 地址栏和底部的导航栏(虚拟后退、主页和多任务按钮)。

我已经通过看全屏APIfulscreen经验文章screenfull.js。所有这些都实现了隐藏 Chrome 地址栏,而不是底部的导航栏。(不过,他们确实将它隐藏在其他一些浏览器中,例如 Opera。)我已经在小米 A2 和 Galaxy S8 上对此进行了测试。

必须有办法实现这一点(至少对于视频元素肯定是这样),因为 YouTube 和 PornHub 上的全屏模式都能够完全隐藏此菜单。

小智 6

聚会有点晚了,但希望它仍然有帮助。

requestFullscreen()Fullscreen API的方法接受一个可选的options 对象

document.documentElement.requestFullscreen({ navigationUI: 'hide' });
Run Code Online (Sandbox Code Playgroud)

这应该可以解决问题。


小智 1

使用网络清单。将其放入文件中:

{
   "display": "fullscreen"
}
Run Code Online (Sandbox Code Playgroud)

然后在 HTML 的头部添加:

<link rel="manifest" href="/manifest.webmanifest">
Run Code Online (Sandbox Code Playgroud)

检查此链接以了解所有可能的方法: https ://developer.mozilla.org/en-US/docs/Web/Manifest