In these days of mobile friendliness and responsive design, our websites have to actively change the way they present themselves depending on the width of the visitor’s browser. While a website can offer a widescreen view on a desktop screen, it will have to be vertically oriented on a mobile phone screen. In this tutorial, we’ll explore how you can use jQuery to load a different style sheet with CSS rules that apply to the current browser width.

There are various ways to do responsive design: it can be done in pure CSS using media queries, or it can be done through JavaScript. In this article we’ll show three JavaScript approaches.

First, we’ll write a function that finds the width of the browser and calls toggleWideScreen (to be defined), which will receive a value of true if the browser is equal or more than 960 pixels:

var setBrowserWidth = function() {
  var width = $(window).width();
  toggleWideScreen(width >= 960);
}

We’ll call getBrowserWidth immediately after the page is loaded, and also whenever the browser window is resized. To do so, we add the following code just before the closing </body> tag:

jQuery(document).ready(function() {
  setBrowserWidth();                   // Set browser width after page load
  $(window).resize(setBrowserWidth()); // Set browser width on resize
});

We can now define the toggleWideScreen function, and we’ll show three ways to do so.

1. Changing the body element class

By changing the class of the body element, we can cause all elements within the body to use different CSS rules, as long as we prefix all those CSS rules with the class on the body element. That is, we could have a style sheet like this:

.photo        { width: 300px; }
.large .photo { width: 960px; }

Normally, the elements with the .photo class will be 300px wide, but if the class of the body element is set to large, then they’ll be 960px wide. Here’s how we can use jQuery to set a class on the body element (removing any class that it has first):

var toggleWideScreen = function(isWide) {
  jQuery('body')
    .removeClass('large small')
    .addClass(isWide > 'large' : 'small');
};

If your style sheets do not contain many browser width-specific rules, this solution may be sufficient.

Another approach to changing the appearance of your web page depending on the width of the browser is by switching the style sheet file that it uses. The style sheets in your web page should be referenced like this:

<link rel="stylesheet" id="css" href="wide.css"/>

Notice that this <link> element has an ID of #css so that we can refer to it. We can now actually use jQuery to point this link to another file depending on the browser width:

var toggleWideScreen = function(isWide) {
  jQuery('#css')
    .attr('href', isWide ? 'wide.css' : 'narrow.css');
};

Changing the href attribute of the <link> element will cause the browser to fetch a new style sheet file from the server. The new style will be applied as soon as the style sheet is loaded. Depending on how long loading takes, it might take a few moments for the new CSS rules to be applied. It’s a good idea to place all rules that depend on browser width in two separate style sheets (for example, wide.css and narrow.css), while keeping all unchanging rules in a separate sheet which is always loaded.

3. Enabling style sheets as needed

The disadvantage of the previous approach is a delay caused by the browser fetching a new style sheet from the server. Although this delay only happens the first time a style sheet is loaded, after which remains in the cache, it would be better to preload the style sheets that we need. This can be done by adding a <link> element for each style sheet, but setting the inactive one to disabled.

You can load all the style sheets you need like this:

<link rel="stylesheet" id="css" href="style.css"/>
<link rel="alternate stylesheet" id="css" id="narrow" href="narrow.css" disabled=true/>
<link rel="stylesheet" id="css" id="wide" href="wide.css"/>

By default, this code loads both the wide and narrow style sheets, but the sheet with rules for small screens is disabled and marked as an alternate stylesheet. You can use jQuery to add and remove the disable attribute as necessary:

var toggleWideScreen = function(isWide) {
  if(isWide) {
    jQuery('#narrow').attr('disabled', true).attr('rel', 'alternate stylesheet');
    jQuery('#wide').removeAttr('disabled').attr('rel', 'stylesheet');
  } else {
    jQuery('#wide').attr('disabled', true).attr('rel', 'alternate stylesheet');
    jQuery('#narrow').removeAttr('disabled').attr('rel', 'stylesheet'); 
  }
};

Switching from wide to narrow view and back now takes no time at all, since the required style sheets are already loaded when the page is first loaded.