Webapp如何通过Javascript在Chrome中隐藏Android导航栏（虚拟返回、主屏幕等按钮）？

Question

13

我正在开发一个网络应用程序，并希望创建真正的全屏体验。对于Android来说，这包括隐藏顶部的Chrome地址栏和底部的导航栏（虚拟的返回、主页和多任务按钮）。

我已经查看了全屏api、全屏体验文章和 screenfull.js。所有这些都实现了隐藏Chrome地址栏，但没有隐藏底部的导航栏（但它们在其他浏览器中隐藏，如Opera）。我已在小米mi A2和Galaxy S8上进行了测试。

一定有办法实现这个目标（至少针对视频元素），因为YouTube和PornHub的全屏模式能够完全隐藏这个菜单。

- Rok Novak

1

YouTube自动隐藏导航栏，因为它使用了新版Chrome的横向自动全屏功能。这仅适用于<video>标签，并使用本地控件通过在屏幕顶部或右侧滑动来显示系统UI。 - keaukraine

2个回答

1

使用 webmanifest。将以下内容放入文件中：

{
   "display": "fullscreen"
}

然后在你的HTML文件头部添加以下内容：

<link rel="manifest" href="/manifest.webmanifest">

- Anon777

1

是的，我知道全屏模式在清单中指定时可以正常工作。问题是在普通的Chrome标签页中它不会这样工作。 - keaukraine

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kdani · Accepted Answer

可能来晚了，但希望仍有所帮助。

全屏 API 的 requestFullscreen() 方法接受一个可选的选项对象。

document.documentElement.requestFullscreen({ navigationUI: 'hide' });

这应该可以解决问题。