Making media queries work in IE8 and below
Microsoft does not support IE8 anymore, and neither do we.
@media CSS queries, Internet Explorer 8 and below will fail to respect them.
Though there are several options (like
css3-mediaqueries), Respond.js was the only one that worked for me.
If you do not want to pollute your application's default JS file with Respond.js, simply:
Create an extra JS file (like
media_queries_polyfill.js) that loads Respond.js:Copy
//= require respond-1.4.2
Make sure it's added to
Embed that JS file in your layout only for old IEs. Looks like this in Haml:Copy
Note: Using an IE conditional means other super-ancient browsers that do not support media queries (like Safari 2.x, or Firefox 3.0 and below) will still not respect them. You are probably fine with that.