Jan
04
2013

Detect screen size with jQuery and apply a CSS style

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 1024x768 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!

 

About the Author: SGH

At the same time, I can’t think of anything more satisfying than sitting in front of TV, eating take-away, lights down low, in my pyjamas and watching crap on TV. Basically, I strive to live a balanced life. Fun. Serious. Fast. Slow. Brainy. Bimbotic. Intense. Lazy. You get the drift.

1 Comment: + Add Comment

  • Better to use content div size based on browser size, so your site looks good even if you resize browser size. In this case need to use: $(“#divID”).$(window).width() & $(“#divID”).$(window).height()

Leave a comment

Click to refresh

Subscribe to newsletter

Sign up with your email to get updates about new resources releases and special offers.