Firefox 6/7 неправильно обрабатывает медиа-запрос максимальной ширины: 320 пикселей?

Question

В последнее время я вижу странное поведение медиазапросов в Firefox, и мне было интересно, кто делает это правильно (по сравнению с Chrome и IE9).

У меня есть следующий CSS:

@media screen and (max-width:320px){
#sfWrapper{max-width:280px;font-size:0.625em;line-height:1.2em}
#cpw_banner{display:none;visibility:hidden;}
#cpw_content{width:100%;}#cpw_aside{width:100%;}
}

И Firefox (при изменении размера браузера, кажется, не замечает max: width 320px, в то время как он реагирует на большие запросы медиа экрана.

Не только это, но когда я достаточно часто использую ctrl + в окне, оно срабатывает, тогда как Chrome и Internet Explorer 9 не применяют новые медиазапросы к ctrl + / ctrl -

---

Кто-нибудь знает, что такое «стандартное» поведение в отношении ctrl + / ctrl- и медиазапросов?

Заранее спасибо ... J.

Answer 1

Я не знаю, почему предоставленный ответ был отмечен, поскольку он не отвечает на вопрос ОП. Причина, по которой медиазапрос не генерирует 320 пикселей, связана с панелью инструментов навигации в Firefox.

Если вы выключите его (перейдите в меню ПРОСМОТР - ИНСТРУМЕНТЫ - НАВИГАЦИОННЫЙ ИНСТРУМЕНТ и снимите его), медиазапрос сработает с разрешением 320 пикселей.

Answer 2

В Firefox, в зависимости от вашей точной настройки панели инструментов, может быть невозможным уменьшение области содержимого ниже определенной ширины. Если вы настроите страницу с вертикальной полосой прокрутки, вы увидите, что полоса прокрутки начинает исчезать, когда окно становится меньше этой минимальной ширины. В этот момент окно браузера становится меньше, но окно просмотра страницы НЕ. Таким образом, если в вашем случае эта минимальная ширина превышает 320 пикселей, то приведенный выше медиазапрос никогда не будет применяться.

Ключевым моментом является то, что медиа-запросы совпадают по ширине окна просмотра страницы, а не по ширине окна браузера.

Кроме того, медиа-запросы соответствуют пикселям CSS, а не пикселям устройства. Масштабирование в Firefox изменяет размер пикселя CSS в пикселях устройства, поэтому размер области просмотра страницы (фиксированный в пикселях устройства) изменяется в пикселях CSS.

Не существует стандарта того, что должен делать зум.

Answer 3

Я работал над адаптивным дизайном для 320px, но Firefox просто не отвечал.

Я обнаружил, что по какой-то причине, если вы установите медиа-запрос на 480px - (max-width:480px) - тогда Firefox все равно будет применять медиа-запросы.