Robert
Robert

Reputation: 725

How do I get modernizr to work with respond.js?

I'm creating a progressively enhanced design with CSS3 media queries, responsive to small screen sizes first, and then larger, using media queries.

Of course, media queries don't work on IE8 and below. My attempted solution is to use modernizer and respond.js.

I have this in my head:

<script type="text/javascript">
        Modernizr.load({
        test: Modernizr.mq,
        nope: '/js/respond.min.js'
        });
      </script>

In firefox, I can see no JS errors in the console. The network bar indicates that modernizr is being delivered.

In IEtester, I have an IE8 panel open. The page is behaving as if respond.js is not present. In IETester's debug bar, I go to 'links'. Respond.min.js is not listed.

What am I doing wrong?

Upvotes: 2

Views: 3240

Answers (1)

Chris Ruppel
Chris Ruppel

Reputation: 818

From the Modernizr docs: http://www.modernizr.com/docs#mq -- the string argument seems to be required to use the media query testing. You could use a test such as:

Modernizr.mq('only screen')

You might want to look at this comment from Alex Sexton (creator of Modernizr.load) that recommends against asynchronous loading of Respond.js due to its highly visual impact on a website.

https://github.com/scottjehl/Respond/issues/14#issuecomment-1017652

Upvotes: 1

Related Questions