Search code examples
javascripthtmlinternet-explorer-8media-queriesrespond.js

Media Queries with Internet Explorer 8

I'm trying to make media queries work on IE8 (Because my company use it, sad I know.) and I already found things like respond.js. The irritating thing is, when I use this link : http://scottjehl.github.io/Respond/test/test.html on IE8, it works perfectly...BUT ! When I download the lastest version of respond.js, and try to launch this exact same test.html page, it doesn't work ! I didn't edited anything, and even the test page written by Scott Jehl doesn't work. Some help please, before I go nuts.

:|

Solution

  • Let's gather some info around the net...

    In Bootstrap's test file here http://getbootstrap.com/getting-started/#template there are some lines in code which say:

    <!-- 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 page here https://www.drupal.org/node/2173441 says:

    Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

    So, lets go where we should be from the very beginning...The official docs :D Respond.js doc

    ...which say, among others,

    Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark (BOM), they will not work with Respond.js in IE7 or IE8. Noted in issue #97

    WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around this, place @font-face rules in the wide open, as a sibling to other media queries.

    ...So if you have a problem with respond.js and ie8 be sure to make a quick check on all of the above and of course, read the official doc.

    also worth reading: 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/

    Put response.js after all CSS you use in web page. Except you are ready for weird action.

    Response.js has an issue with CDN & domain.