css - Media query for fullscreen -

i use following media query apply css overrides in fullscreen mode:

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

in works in firefox unreliable in chrome (both latest versions on windows 7 x64). can try apply overrides when not in fullscreen mode need invert query. questions are:

1. should chrome support query?
2. how negate (logical not)?

p.s.

my viewport declared this:

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

it might less elegant, more robust, listen full screen event, perhaps add is-fullscreen class body can write rule this:

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

for example:

document.addeventlistener('fullscreenchange', function() {   document.body.classlist.toggle('is-fullscreen', document.fullscreenenabled); }); 

this event has vendor-prefixed versions, make sure you're using one(s) need.