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.

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.

5 thoughts on “Loading CSS Based on Screen Resolution Using Javascript”

  1. 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?

    1. @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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>