Sometimes we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen.width property and change the stylesheet. In this tutorial we're going to see how to do that using jQuery.

The first step is to load our base stylesheets, the jQuery library and our javascript.

The colour of this text will change.

Let's test if the user screen size is less than 1024×768 and if it is, we will change the stylesheet.

The changing style

Define the same style in two different sheets. Once for the 1024 x 768 and once for the 800 x 600. Just make something quick and distinctive, for style1.css I'm adding:

div{
color: #006699;
font: 24px Georgia, serif;
}


and for style2.css
 

div{
color: #df0000;
font: 24px "Trebuchet MS", sans-serif;
}


 

Detecting screen width

We are going to add a JavaScript alert so the execution will pause until we click OK and we get to see the former style.
 

$(document).ready(function() {

if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "style2.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "style1.css"});
}
});


As a selector, we look for the link element with a rel attribute with a value of stylesheet. We are going to redirect its href to a different stylesheet. Now, since I'm loading a reset stylesheet in the first place, i will add the :not(:first) modifier, so it won't affect the first element.
 

Enjoy!

 

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

one + 6 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Text Resizing With jQuery

Want to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how - using jQuery (a great JavaScript library).

5+ Useful jQuery Plugins for Images

We love jQuery for its flexibility and many uses. But some of the most impressive jQuery applications are those that involve images. It really can allow you to do some useful stuff and even add a “wow” factor to your project. So here we’ve rounded up some jQuery plugins to help you display images in your next project.