I use modernizer.js & respond.js to implement media query on IE8.
I coded my page (HTML & Javascript) such as:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Modernizr test page</title>
<style type="text/css" media="all">
@media (max-width: 500px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
Modernizr test page<br>
<script src="modernizr.custom.js"></script>
<script>
Modernizr.load({
test: Modernizr.mq('only all'),
nope: '//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'
});
</script>
</body>
</html>
It did not work.
I then changed my code to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Modernizr test page</title>
<link rel="stylesheet" href="myStylesheet.css">
</head>
<body>
Modernizr test page<br>
<script src="modernizr.custom.js"></script>
<script>
Modernizr.load({
test: Modernizr.mq('only all'),
nope: '//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'
});
</script>
</body>
</html>
And a separate CSS file "myStylesheet.css":
@media (max-width: 500px) {
body {
background-color: blue;
}
}
And it worked.
I had a quick look on respond.js Github page but could not find anything mentioned regarding internal stylesheet references not being supported.
Did I miss something?
It seems we have to connect respond.js after any styles internal or external. Then it should work!