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:
I”m using the JQuery file from this website.
It seems like the stylesheet links in the html are taking over depending on what is listed first.
Certainly, Kevin. The first stylesheet applies the initial styles, while the second one applies styles that, depending on the screen size, overrides the first styles.
Hi,
I just used your script. This is good! But I have a question, if I resize my browser to 1024×768 on my laptop 1024×768 resolution, I get the same message that says to me that I’m using a screen larger then 1024..
I work with a 1920×1080 screen on my laptop.
Can you help me?
Even on your exemple, on my laptop, I get the “Screen larger then …” even if I’m on 1024.
You could try checking what’s the screen width by adding the following before the if sentence:
[js]
alert(‘width:’ + screen.width);
[/js]
You will see there what’s the screen size detected by the browser’s DOM.
In addition, you could remove the height checking in the if sentence so it will only check the screen width.
Hey, this is definitely a great screen for detecting screen size. Thanks a lot!!!
Want to ask if I want to detect three screen size in particular; say 800x600px; 1024X768px; and 1440X900px; what shall i change in the js?
Thanks for help
Eunice, you could use the switch-case-break conditional structure to test for many different screen sizes and load the proper stylesheet.
All is working perfectly in firefox and safari, but opening in ie8 makes it crash completely.
Is this common? Any help would be great!
if your current screen size has
width>=1024 and height>=768, browser will load only 1 css files is “detect1024.css” >> That’s good.
But if your screen size is < 1024 Then browser have to download 2 css files (detect1024.css and detect800.css), you can check it in the Net/css panel of firebug.
another way is use CSS3
ex:
<head>
<title>CSS3 Screen size </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” media=”only screen and (max-width: 1024px)” href=”detect800.css” />
<link rel=”stylesheet” media=”only screen and (min-width: 1024px)” href=”detect1024.css” />
</head>
Can someone please help me. I have tried to use this on a site but I cannot get it to work….. The site has been designed to fit a 1280 x 960 so I am really trying to just size it down for smaller screens. I have images and on the page and I tried to get help before but I weas told the images were too big, too wide and too heavy for the web so, “the page is going to stretch out to the size if the widest image and cut everything off because the page size cannot be smaller than the narrowest image, no matter how small the window size gets.” I am confused….. Is there no way that this will work for my site then? Can anyone help me please?
I pasted the Javascript inside my .
I get the alert if the screen size is bigger than 800×600 and smaller than 1024x….
it won’t load the css file. I tried also href=”css/detect800.css”
thank you
I know this is for screen resolution detection, not actual window size, but is there a way to do this for window size?
Here’s the experience I’m looking for: A user views a page at 1280 x 960 resolution, but their current window size for the browser is 600 x 600. In this case, they get 600.css. But if they drag the corner of the window and make it larger, it switches to using 600_plus.css.
David, your case would be better served using css media queries, but if for some reason you don’t want to use them (for example, browser compatibility), you should change the code and write a listener that detects the window resizing, probably using the resize jQuery method.
you could change
screen.width to document.body.clientWidth to get the window width instead of the screen 🙂
[…] people with higher resolutions are forced to use the same CSS. For years now there have been many ways to detect screen resolution and serve different CSS based on screen real-estate. Would it be so hard […]
[…] How to detect screen size and apply a CSS style […]
Lazy? You couldn’t even be bothered to bring some positivity into your pointless reply by posting your 1 line of css. Asshole.