Медиа-запрос не работает в IE9

Question

У меня странная проблема, которая возникает только в IE9.Я работаю над веб-страницей с настольным макетом и мобильным макетом.Тот же HTML, другой CSS.Проблема возникает с кодом ниже:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)

Все браузеры, за исключением IE9, показывают сайт рабочего стола по мере необходимости.Мобильные браузеры правильно отображают мобильную раскладку.Проблема с IE9 заключается в том, что он также показывает мобильную раскладку.

Теперь, если я уберу слова «только» и «экран» из приведенного выше кода, IE9 затем правильно отобразит сайт рабочего стола.Проблема в том, что мобильные браузеры также отображают рабочий стол сайта.Я провел некоторые исследования по этому вопросу и ничего не видел по этому вопросу.

Спасибо за чтение,

Джон

Answer 1

На всякий случай, если кто-то сканирует SO для получения ответа на этот вопрос, два приведенных выше ответа не решают основную проблему, на которую дан ответ - Медиа-запрос CSS не работает в IE 9

В основном встроенные медиазапросы CSS3 действительно работают в IE9, но вы должны отключить режим совместимости -

<meta http-equiv="X-UA-Compatible" content="IE=9">

Приведенный выше метатег должен быть помещен перед любыми другими метатегами, иначе IE9 будетпо умолчанию включен режим совместимости, который впоследствии не будет работать.

Answer 2

Из того, что я могу сказать, все сводится к тому, что IE9 не интерпретирует "min-device-width" и "max-device-width".

Согласно http://msdn.microsoft.com/library/ms530813.aspx он не поддерживает эти свойства, только "min-width" и "max-width".

Кроме того, http://www.w3.org/TR/css3-mediaqueries/#error-handling указывает, что браузер должен игнорировать свойства, которые он не распознает. Похоже, что не так с IE9.

Answer 3

Да, используйте @media (max-width: 860px) вместо max-device-width.

IE 9 только что дал мне сердечный приступ. Медиа-запросы проекта не работали.

Затем, после нескольких минут поиска, вы должны включить CSS в HTML. Только встроенные стили!

Какое перетаскивание этих браузеров IE!

Answer 4

Я обычно добавляю это к своим проектам, и это работает для меня до сих пор:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Answer 5

Режим совместимости IE решает проблему. Перейдите к Параметры просмотра в режиме совместимости и отключите параметр Отображать сайты интрасети в режиме просмотра в режиме совместимости .