如何在基于Web应用程序运行的PWA渐进式Web应用程序中隐藏顶部的导航栏

问题描述

我正在基于Web应用程序开发PWA，所以我添加了serviceworker.js和manifest。

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

解决方法

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

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

这是我在“添加到主屏幕”库中使用的一些代码。您可以使用这些媒体查询，只要在从主屏幕打开应用程序时不希望显示标题，就可以将CSS添加到CSS中以隐藏该标题。

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