媒体查询全屏

Question

我使用以下媒体查询在全屏模式下应用我的CSS覆盖:

@media (device-width: 100vw) and (device-height: 100vh) {
  .content {
    padding: 0px !important;
  }
}

在Firefox中完美运行但在Chrome中非常不可靠(在Windows 7 x64上都是最新版本).我可以尝试仅在不是全屏模式时应用我的覆盖,但需要反转查询.所以我的问题是:

1. Chrome应该支持查询吗？
2. 我如何否定它(逻辑上没有)？

PS

我viewport的声明是这样的:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Answer 1

使用新的 css 功能display-mode

@media all and (display-mode: fullscreen) {
  .content {
    padding: 0px;
  }
}

也避免使用，!important因为这是一种不好的做法

您可以使用not. 可以在此处找到有关这方面的详细信息。

Answer 2

侦听全屏事件可能不那么优雅，但更健壮，然后可以is-fullscreen向正文中添加一个类，以便您可以像这样编写规则：

body.is-fullscreen .content { padding...

例如：

document.addEventListener('fullscreenchange', function() {
  document.body.classList.toggle('is-fullscreen', document.fullscreenEnabled);
});

此事件具有供应商前缀的版本，因此请确保您使用的是所需的版本。