Медиа запрос в полноэкранном режиме

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

Это событие имеет версии с префиксом поставщика, поэтому убедитесь, что вы используете тот, который вам нужен.