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) }