Modern Web Engineerinng

[munem15-4873]

JavaScript

Another method that can be used is JavaScript, especially as a back-up to
devices that don't support all of the CSS3 media query options. Fortunately,
there is already a pre-made JavaScript library that makes older browsers (IE
5+, Firefox 1+, Safari 2) support CSS3 media queries. If you're already using
these queries, just grab a copy of the library, and include it in the mark-up:
css3-mediaqueries.js.

In addition, below is a sample jQuery snippet that detects browser width
and changes the style sheet accordingly — if one prefers a more hands-on
approach:

1 <script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.4/jquery.min.js "></script>
2
3 <script type="text/javascript">
4 $(document).ready(function(){
5 $(window).bind("resize", resizeWindow);
6 function resizeWindow(e){
7 var newWindowWidth = $(window).width();
8
9 // If width is below 600px, switch to the mobile
stylesheet
10 if(newWindowWidth < 600){ $("link
[rel=stylesheet]").attr({href :
"mobile.css"}); } // Else if width is
above 600px, switch to the large stylesheet else if
(newWindowWidth > 600){
11 $("link[rel=stylesheet]").attr({href : "style.css"});
12 }
13 }

14 });
15 </script>

There are many solutions for pairing up JavaScript with CSS media queries.
Remember that media queries are not an absolute answer, but rather are
fantastic options for responsive Web design when it comes to pure CSSbased
solutions. With the addition of JavaScript, we can accommodate far
more variations. For detailed information on using JavaScript to mimic or
work with media queries, look at "Combining Media Queries and
JavaScript."

Source: Smashing eBook􁴹Modern Web Design and Development