作为PWA访问站点时如何隐藏元素

Question

我已经开发了一个网站，并希望使用它作为一个PWA(渐进式Web应用程序)以及。

但是我想在PWA中隐藏特定的元素。

这是我想要隐藏的部分:

<section class="py-5 border-bottom noShowApp" id="features">

我尝试过CSS方法:

@media all and (display-mode: standalone) {
.noShowApp {
display: none;
}
}

和JS方法:

function isRunningStandalone() {
return (window.matchMedia('(display-mode: standalone)').matches);
}
if (isRunningStandalone()) {
alert('hi');
hide(document.getElementById('features'));
}

我得到我的'alert'在应用程序中，但我想要隐藏的部分是不隐藏....

有人能指出我在正确的方向上如何得到任何这些方法(CSS或JS)的工作。我更喜欢CSS的方法，但如果这是不可能的，JS也可以。

Answer 1

直接回答你的标题问题(因为你把标题和问题的内容搞混了)

通过PWA访问站点时如何禁用DIV ?

@media all and (display-mode: standalone) {
#divId {
display: none
}
}

来自MDN关于显示模式为standalone

应用程序将看起来和感觉像一个独立的应用程序。这可以包括应用程序有不同的窗口，在应用程序启动器中有自己的图标等。在这种模式下，用户代理将排除用于控制导航的UI元素，但可以包括其他UI元素，如状态栏。

在manifest.json中必须有

{
(...)
"display": "standalone",
"orientation":"portrait"
}