CODEWITHSUNDEEP
javascriptjqueryresponsive-designmodernizrrespond.js
Suthan Bala
Suthan Bala

Reputation: 3299

How can I disable Responsiveness on IE 8 using the Modernizr & Respond.JS

I am building an app using Modernizr, Respond.js, Bootstrap and custom css coded using some media queries as well. I want to disable the responsiveness on IE8 (Any media queries under 1024px). Is there anyway I can disable all or selected media queries on IE8, because the style is messed up when the browser is resized, so I want to have the regular desktop view only supported on IE8. I was able to disable the Bootstrap styles by the instructions at http://getbootstrap.com/getting-started/#disable-responsive but I don't know where to start to disable all the other media queries. Any suggestions?

Upvotes: 0

Views: 1809

Answers (1)

cyberwombat
cyberwombat

Reputation: 40104

I was looking for a way to just deliver the desktop version to IE8 when using BS3 which is mobile first. I did not want to use RespondJS (there is a flicker plus I don't care to provide/deal with anything but one size for the IE8 crowd). I ended up using a gulp/grunt task to extract the relevent media queries for desktop and add them to a separate file to be added with IE conditional statement.

There is a node library called node-match-media that will do the trick. Additionally there is a Grunt plugin.

There was no Gulp plugin but it was easy enough to whip up a task. In my case I only have one css file to parse for media queries - adjust as needed.

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'));
});

Then in my html:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/styles/ie8.css">    
<![endif]-->

Upvotes: 1

Related Questions