如何隐藏基于Web应用程序的运行顶部导航栏

Question

我想隐藏顶部导航栏，如下图所示。

Answer 1

这看起来像是您将其作为布局的一部分，而不是浏览器地址栏，我认为 Mathias 对此感到困惑。

您可以使用 CSS 媒体查询来检测您的应用程序的呈现方式。

这是我在“添加到主屏幕”库中使用的一些代码。您可以使用这些媒体查询，只需将 CSS 添加到您的 CSS 即可隐藏 header 如果您希望在从主屏幕打开应用程序时抑制它。

            window.matchMedia( "(display-mode: fullscreen)" ).matches ||
            window.matchMedia( "(display-mode: standalone)" ).matches ||
            window.matchMedia( "(display-mode: minimal-ui)" ).matches;