Loading CSS Based on Screen Resolution Using Javascript
While working on the redesign of Techie buzz, I had several things in mind that I wanted to include in the design. One of the things was to make the design widescreen friendly by making use of a larger content area.

Throughout the design process, I asked several team members to test the design on different browsers. However, all the testers had one thing in common, they were all using widescreen monitors.
Once I rolled out the new design, one of my friends and fellow bloggers Deepak Jain sent me a message saying that the design was broken on his PC. On further investigation, I found that he was using a monitor with a max resolution of 1024×768 pixels. The new design did not particularly work well on those resolutions.
Now I personally did not want to change the width to just fit properly in 1024×768 resolutions. To overcome that I came up with a much better solution.
- I separated all the hardcoded width for the layers, and copied it to a separate file.
- I then created a copy of the new file, and modified it to work in 1024×728 pixel screen resolution.
- I then wrote a conditional Javascript to include the CSS based on the screen resolution of the user.
Doing this made the them work properly on both 1024×76 pixel and higher screen resolutions.
Here is the code that can be used to include CSS based on different resolutions.
<script type="text/JavaScript">
var screenwidth = screen.width;
if (screenwidth <= 1024) {
document.write('<link rel="stylesheet" href="http://cdn2.techie-buzz.com/ntc/regular.css" type="text/css" media="screen" />');
}
else {
document.write('<link rel="stylesheet" href="http://cdn2.techie-buzz.com/ntc/widescreen.css" type="text/css" media="screen" />');
}
</script>
Have fun with your next design. If you want more such useful and interesting tips, don't forget to visit the Webmaster Tips section.
Comment Using Facebook
5 Responses to this Article | Share your Opinions/Comments
We moderate comments to prevent spam. Moderation is done within few hours. Please try and stay on topic and refrain from using abusive language. If you think there is a problem with this post, please email the post author or send us an email at tips@techie-buzz.com with the URL and the problem you see and we will rectify it as soon as we can.

this one solves my problem! Thank you!
excellent! you solved my fixed vertical navigation issue!
Keith, this uses a different CSS based on the users’ screen resolution — is there a way to do the same for the browser window’s resolution?
@Geetesh Yes you can do that, you could use window.innerWidth or window.innerHeight to get the size of the current window and then apply a new stylesheet on the fly. Please make sure to use document.body.offsetWidth and document.body.offsetHeight for backward compatibility with IE
I’m sorry to point it out, but the method is essentially faulty. Entire HTML page is overwritten if you use document.write() inside a function.
It’s better to use some AJAX loader in this case. Or e.g. jQuery getScript().