媒体查询全屏

Question

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

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

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

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

附：

我的viewport声明如下：

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

Answer 1

它可能不那么优雅，但更强大，听全屏事件，然后可能添加一个is-fullscreen类到身体，所以你可以写这样的规则：

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

例如：

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

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

Answer 2

使用新的css功能display-mode

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

也避免使用!important，因为它是一个bad practice

你可以用not否定@media规则。有关这方面的详细信息，请访问here。