Loading CSS Based on Screen Resolution Using Javascript
By on September 29th, 2009

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.

techie_buzz_redesign

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.

  1. I separated all the hardcoded width for the layers, and copied it to a separate file.
  2. I then created a copy of the new file, and modified it to work in 1024×728 pixel screen resolution.
  3. 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://cache.techie-buzz.com/ntc/regular.css" type="text/css" media="screen" />');
    }
    else {
      document.write('<link rel="stylesheet" href="http://cache.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 section.

Tags: ,
Author: Keith Dsouza Google Profile for Keith Dsouza
I am the editor-in-chief and owner of Techie Buzz. I love coding and have contributed to several open source projects in the past. You can know more about me and my projects by visiting my Personal Website. I am also a social networking enthusiast and can be found active on twitter, you can follow Keith on twitter @keithdsouza. You can click on my name to visit my Google+ profile.

Keith Dsouza has written and can be contacted at keith@techie-buzz.com.

Leave a Reply

Name (required)

Website (optional)

 
    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'advanced_comment' not found or invalid function name in /home/keith/techie-buzz.com/htdocs/wp-includes/comment-template.php on line 1694
 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN