全屏媒体查询

Question

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

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

在Firefox中可以完美运行，但在Chrome中非常不可靠（Windows 7 x64上的最新版本）。我可以尝试仅在非全屏模式下应用我的覆盖，但需要反转查询。所以我的问题是：

1. Chrome是否支持此查询？
2. 如何否定它（逻辑非）？

p.s.

我的 viewport 声明如下：

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

- UserControl

---

我在Linux上遇到了相反的情况：这个媒体查询在Chrome中有效，在Firefox上无效。 - Deleplace

Answer 1

使用新的CSS特性display-mode

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

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

你可以使用not来否定@media规则。有关此内容的详细信息，请访问此处

- John Balvin Arias

---

问题还问如何否定它？！ - musicformellons

Answer 2

也许不够优雅，但更加健壮的方法是监听全屏事件，然后在 body 标签中加入一个 is-fullscreen 的类名，这样你就可以像下面这样写规则：

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

例如：

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

这个事件有供应商前缀版本，因此请确保您正在使用所需的版本。

- user663031