Medienabfrage für Vollbild

Question

ich folgende Medien Abfrage verwenden, um meine CSS-Überschreibungen im Vollbildmodus anwenden:

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

In funktioniert perfekt in Firefox, aber sehr unzuverlässig in Chrome (beide neuesten Versionen auf Windows 7 x64). Ich kann versuchen, meine Überschreibungen nur anzuwenden, wenn ich nicht im Vollbildmodus bin, sondern die Abfrage invertieren muss. Also meine Fragen sind:

1. Sollte Chrome die Abfrage unterstützen?
2. Wie negiere ich es (logisch nicht)?

p.s.

Mein viewport wird wie folgt erklärt:

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

Answer 1

Es könnte weniger elegant, aber robuste, auf das vollen Bildschirm Ereignis zu hören, dann vielleicht eine is-fullscreen Klasse an den Körper hinzufügen, damit Sie schreiben Ihre Regel wie folgt aus:

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

Zum Beispiel:

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

Dieses Ereignis hat Versionen mit Herstellervorgaben. Stellen Sie daher sicher, dass Sie die von Ihnen benötigten verwenden.