Как я могу отключить отзывчивость в IE 8, используя Modernizr & Respond.JS

Я создаю приложение, используя Modernizr, Respond.js, Bootstrap и пользовательские CSS, закодированные с использованием некоторых медиа-запросов. Я хочу отключить отзывчивость на IE8 (любые медиа запросы под 1024px). Есть ли в любом случае, я могу отключить все или выбранные медиа-запросы в IE8, потому что стиль не работает при изменении размера браузера, поэтому я хочу, чтобы обычное представление рабочего стола поддерживается только в IE8. Мне удалось отключить стили Bootstrap по инструкциям на http://getbootstrap.com/getting-started/, но я не знаю, с чего начать, чтобы отключить все остальные медиазапросы. Какие-либо предложения?

1 ответ

Решение

Я искал способ просто доставить версию для настольного компьютера в IE8 при использовании BS3, который является мобильным в первую очередь. Я не хотел использовать RespondJS (есть мерцание плюс, я не хочу предоставлять / иметь дело с чем-либо, кроме одного размера для толпы IE8). В итоге я использовал задачу gulp/grunt для извлечения соответствующих медиазапросов для рабочего стола и добавления их в отдельный файл для добавления с условным оператором IE.

Существует библиотека узлов с именем node-match-media, которая сделает свое дело. Дополнительно есть плагин Grunt.

Не было никакого плагина Gulp, но это было достаточно легко, чтобы поднять задачу. В моем случае у меня есть только один CSS-файл для анализа медиа-запросов - настроить по мере необходимости.

var tap = require('gulp-tap');
var rename = require('gulp-rename');

gulp.task('desktopify', function() {
  var matchMedia = require('node-match-media');
  matchMedia.configure({
    width: '992px', // Pretend width to force
    height: '768px', // Pretend height to force
    px_em_ratio: 16,
    always_match: []
  });
  // My original css for modern browsers
  gulp.src('./public/styles/public.css')
    .pipe(tap(function(file, t) {
      file.contents = new Buffer(matchMedia.run(file.contents.toString()));
    }))
    // Create a custom file that contains just the needed media queries
    .pipe(rename('ie8.css'))
    .pipe(gulp.dest('./public/styles'));
});

Тогда в моем HTML:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/styles/ie8.css">    
<![endif]-->
Другие вопросы по тегам