@media query min-width глючит в хроме
Верстаю сайт, необходимо задавать разные стили в зависимости от размера viewport'а.
Использую след. правило:
@media only screen
and (min-width: 1200px) {
html{
background: #0f0;
}
}
Так вот, все работает отлично, но при ctrl++ в хроме правило "зависает" и не реагирует на изменение ширины вьюпорта. Что бы хром проснулся, надо поресайзить окно браузера, чтобы сработало другое подобное правило (у меня max-width: 960px), и тогда, при возвращении ширины окна в исходное состояние, правило уже перестает действовать, как и должно быть (ведь вьюпорт уменьшился, верней физически остался тем же, но число отображаемых им "пикселей" стало меньше )
Как решить проблему? Хотя бы обработчиком js. Вопрос в том как отловить изменение зума, ведь врядли браузер генерирует событие. Ну не ставить же таймер и проверять изменение innerWidth... И даже если удастся отловить зумирование, то как вставить браузеру пендаля, чтоб он перекалькулировал свое состояние?
Я еще даже не представляю сколько сюрпризов будет от других браузеров...
|