I recently spent a frustrating half hour trying to get respond.min.js to work. I knew there was nothing wrong with the script: I've successfully used it several times before. But this time it just wouldn't play. I eventually found the solution – and kicked myself. For the benefit of anyone else having the same problem, here's the story.
As you probably know, respond.min.js is designed to provide media query support for older browsers. If you are creating a responsive website, the script will allow the site to run correctly in certain browsers, particularly Internet Explorer 8 and below. To use it, you only need to reference it from your page; something like this:
<script type="text/javascript" src="respond.min.js"></script>But when I tested my site in IE7, it would only show my "small screen" (or "mobile") layout, even when I was running the browser fulll screen. Clearly, the media queries weren't working.
In the end, I did what I should have done in the first place: I read the documentation. And this is what I found:
Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server.
Sure enough, I was testing the site from a local copy on my PC. So I uploaded the relevant files to the web server. From then on, everything fell into place. A simple solution to a frustrating problem.
My thanks to Scott Jehl and his collaborators for creating this simple but highly effective script. For more information about respond.min.js, see Scott's page on GitHub.
No comments:
Post a Comment