媒體查詢全屏

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

此事件有供應商的前綴版本，因此請確保您使用的是您需要的版本。