Reputation: 725
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
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