媒体查询全屏

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"/>

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