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

【问题标题】：How to hide the top Navigation bar which is running based on Web Application如何隐藏基于 Web 应用程序运行的顶部导航栏
【发布时间】：2020-09-30 11:17:45
【问题描述】：

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

【问题讨论】：

浏览器放在那里对用户有帮助。我知道 Chrome 添加了一个，我相信 PWA 开发人员无法控制它。

标签： javascript python web progressive-web-apps mobile-development

【解决方案1】：

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

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

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

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

【讨论】：