Media request for full screen viewing

Question

I use the following multimedia query to apply CSS overrides in full screen mode:

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

In works fine 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 full screen mode, but I need to invert the request. So my questions are:

• Should Chrome support the request?
• How can I cancel it (boolean not)?

ps

My viewport declared as follows:

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

Answer 1

It may be less elegant, but more reliable, for listening to a full-screen event, and then, possibly, add the is-fullscreen class to the body so that you can write your rule as follows:

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

For instance:

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

This event has vendor prefix versions, so make sure you use the one you need.

Answer 2

Use the new features of CSS display mode

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

Also avoid using !important as this is bad practice.

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