Media query for fullscreen

Question

I use the following media query to apply my CSS overrides in fullscreen mode:

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

In works perfectly in Firefox but very unreliable in Chrome (both latest versions on Windows 7 x64). I can try to apply my overrides only when not in fullscreen mode but need to invert the query. So my questions are:

1. Should Chrome support the query?
2. How do I negate it (logical not)?

p.s.

My viewport is declared like this:

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

Answer 1

Use new css features display-mode

@media all and (display-mode: fullscreen) {
  .content {
    padding: 0px;
  }
}

Also avoid using !important as it's a bad practice

You can negate @media rules with not. Details on this can be found here.