Site icon StartFunction

How to detect screen size 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.

Before we begin, that a look at what we will be building

Detecting screen size with jQuery demo

Loading…

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

[html]

<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="detect800.css"/>
http://jquery.js
http://detect.js
</head>
<body>
<div>The colour of this text will change.</div>
</body>

[/html]

We’re going to test if the user screen size is less than 1024 x 768 and if it is, we’ll 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 detect800.css I’m adding

[css]

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

[/css]

and for detect1024.css:

[css]

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

[/css]

Detecting screen width

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

[js]

$(document).ready(function() {

if ((screen.width>=1024) && (screen.height>=768)) {
alert(‘Screen size: 1024×768 or larger’);
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else  {
alert(‘Screen size: less than 1024×768, 800×600 maybe?’);
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});

[/js]

As a selector, we look for the link element with a rel attribute with a value of stylesheet. We’re 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.

That’s it. Check the example of detecting screen width or just download the source files:

Exit mobile version