媒体查询全屏

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); 
}); 

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