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://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 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.
  • kata

    this one solves my problem! Thank you!

  • http://www.verloskundigenoost.nl Ruedewiel

    excellent! you solved my fixed vertical navigation issue!

  • Geetesh

    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?

    • http://keithdsouza.com Keith Dsouza

      @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

  • http://www.prowebdesign.ro Irina

    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().

 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN