Медиа-запросы с Internet Explorer 8

Question

Я пытаюсь заставить медиазапросы работать на IE8 (потому что моя компания использует его, к сожалению, я знаю.), И я уже нашел такие вещи, как response.js. Раздражает то, что когда я пользуюсь этой ссылкой: http://scottjehl.github.io/Respond/test/test.html на IE8, она отлично работает... НО! Когда я загружаю последнюю версию response.js и пытаюсь запустить точно такую ​​же страницу test.html, она не работает! Я ничего не редактировал, и даже тестовая страница, написанная Скоттом Джелем, не работает. Пожалуйста, помогите, прежде чем я сойду с ума.

: |

Answer 1

Давайте соберем информацию по сети...

В тестовом файле Bootstrap здесь http://getbootstrap.com/getting-started/ есть несколько строк в коде, которые говорят:

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Страница Drupal здесь https://www.drupal.org/node/2173441 гласит:

Из-за правил безопасности браузера Respond.js не работает со страницами, просматриваемыми по протоколу file:// (как при открытии локального файла HTML). Чтобы проверить адаптивные функции в IE8, просмотрите свои страницы по HTTP(S). См. Документацию Respond.js для деталей.

Итак, давайте пойдем туда, где мы должны быть с самого начала... Официальные документы: D Respond.js doc

... которые говорят, среди прочего,

По сообщениям, если CSS-файлы кодируются в UTF-8 с помощью Byte-Order-Mark (BOM), они не будут работать с Respond.js в IE7 или IE8. Отмечено в выпуске № 97

ВНИМАНИЕ: включение правил @font-face в медиа-запрос приведет к зависанию IE7 и IE8 во время загрузки. Чтобы обойти это, разместите правила @font-face в открытом доступе, как аналог других медиа-запросов.

... так что если у вас есть проблемы с respond.js а также ie8 не забудьте быстро проверить все вышеперечисленное и, конечно же, прочитать официальный документ.

Также стоит прочитать: http://nextflow.in.th/en/keep-your-responsive-web-design-against-the-legendary-internet-explorer-ie6ie7ie8/using-response-js-to-make-ie6ie7ie8-understand-your-responsive-design/

Поместите response.js после всех CSS, которые вы используете на веб-странице. За исключением того, что вы готовы к странным действиям.

Response.js имеет проблему с CDN и доменом.

Answer 2

Задача решена!

Я должен был поместить свой проект на веб-сервер, чтобы он работал. Просто открыть HTML-файл недостаточно.