Как использовать Mobile-first в IE8

Учитывая, что SingularityGS следует, по умолчанию, подходом для мобильных устройств, как вы, ребята, решаете проблему в IE8, которая показывает мобильную версию всего, что зависит от медиа-запросов?

Вы нашли решение для этого или мне нужно сначала переключиться на рабочий стол?

Спасибо.

Ответ 1

Вместо того, чтобы обойти недостатки IE 7 и 8, вы можете заставить IE 7-8 фактически поддерживать медиа-запросы!

Я использую awesome Respond.js polyfill, чтобы включить медиа-запросы в IE 7 и 8. Просто добавьте этот код в свой HTML <head> и вам хорошо идти!

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

Вы также можете включить селектора CSS3 в IE 7 и 8, чтобы материал вроде .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } работал.

Вам понадобится Selectivizr polyfill. Для ответа на работу вместе с Selectivizr, Selectivizr должен быть версии 1.0.3b или более поздней (которая еще не была удалена как стабильная в течение двух лет по какой-либо причине) и должен быть загружен до ответа. Selectivizr также требует NWMatcher или альтернативу для загрузки перед ним. Итак, правильный порядок:

<!--[if lt IE 9]>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

И вы также должны иметь html5shiv polyfill (aka html5shim), чтобы IE 7-8 поддерживал самый базовый CSS3 вещи.

Итак, мой окончательный набор IE-7-8 polyfills выглядит так:

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

Примечание: не используйте IE9.js в сочетании с теми, которые заставляют IE 8 замораживаться.

Ответ 2

Я использую Breakpoint, построенную в поддержке No Query Fallback, в сочетании с IE-классами по моему тегу HTML или с тестами Modernizr для поддержки Media Query.

https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks