Script to Load Different .css Depending On Screen Resolution

by 19 comments
Hey all, I've never posted in the Website Design forum before, but i had a useful script I thought I'd share with you. This is a relatively simple javascript which lets you specify different .css stylesheets to correspond with different screen resolutions.


Put the following code between the <head> </head> tags of your site:


<script type="text/javascript">

function getcss(cssfile){

loadcss = document.createElement('link')

loadcss.setAttribute("rel", "stylesheet")

loadcss.setAttribute("type", "text/css")

loadcss.setAttribute("href", cssfile)

document.getElementsByTagName("head")[0].appendChild(loadcss)

}

if(screen.width <= '800')
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)

{

getcss('800x600.css')
// Defines the .css file you want to load for this range (800x600.css)

}



else if(screen.width > '800' && screen.width < '1280')
// This time we're targeting all resolutions between 800 and 1280 pixels wide

{

getcss('1024x768.css')
//And we want to load the .css file named "1024x768.css"

}


else if(screen.width > '1024' && screen.width < '1600')
//Targeting screen resolutions between 1024 and 1600px wide

{

getcss('1280x1024.css')
//Load 1280x1024.css

}



else

{

getcss('1280x1024.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css

}

</script>


I use this to adjust table, image, font size to make full use of screen real estate at any resolution. Sometimes at 800x600 and smaller I'll lose an advertising banner in liu of maintaining the form and function of my site.
#web design #css #depending #javascript #load #resolution #screen #script #stylesheet
  • Profile picture of the author Joshua.Taylor
    Nice find. thanks for sharing this!
  • Profile picture of the author yangyang
    That is a really great script. However if you could do it server side, it'd be better!

    Thanks!
    • Profile picture of the author MichaelB23
      Wow great thanks!!! Been looking for this all over.
    • Profile picture of the author Aaron Sustar
      Originally Posted by yangyang View Post

      That is a really great script. However if you could do it server side, it'd be better!

      Thanks!
      There's virtually no way of doing this server-side, because the HTTP header sent by visitor's browser does not include any information about visitor's screen resolution. JavaScript (well, any kind of client-side script language) is pretty much the only option you have.
  • Profile picture of the author alby54
    Great script.....but wouldn't make more sense to take in consideration browser-width instead of screen resolution which really doesn't mean much? Also...this is the script part then, to make it work, it is neccessary to add the customized css stylesheets as "alternate"...am I right ?

    best regards
    Alby54
    • Profile picture of the author CBrowne
      Originally Posted by alby54 View Post

      Great script.....but wouldn't make more sense to take in consideration browser-width instead of screen resolution which really doesn't mean much? Also...this is the script part then, to make it work, it is neccessary to add the customized css stylesheets as "alternate"...am I right ?

      best regards
      Alby54
      Just found this on google, and thought I should point out that javascript does have a "window.outerWidth" and "window.outerHeight" option, now I know it isn't perfect because it includes window decorations and chrome (which on my screen are 0 pixels on the sides but about 75px in added height); but you don't really need to be pixel-perfect for these conditionals.

      As for the other part, no. The script adds the CSS in, and I would recommend ALWAYS READING AND UNDERSTANDING SCRIPTS YOU FIND ON THE NET before you use them. This is security 101, and I shouldn't really have to point it out. In particular, note the "getcss" function, whose job is simply to add the necessary markup.
  • Profile picture of the author staffelseo
    so if the resolution is different it will load a differend .css WOW that is pretty cool, this is a real problem solver thanks
  • Profile picture of the author alby54
    Ok, but if I'm not mistaken, the getcss function provides to include a certain stylesheet not to sostitute an existing one. There has to be at least one kind of CSS stylesheet loaded as default otherwise, and I shouldn't really have to point it out, who doesn't have javascript enable will end up viewing an unstyled white page with just text in it.
  • Profile picture of the author kendrickyi
    Thanks Tony D for the code! It's real helpful!
    • Profile picture of the author tjk29
      Hello,

      I am sorry for bringing up old topics but I ran into some problems with this.

      I tried it on my site but ran into problems with it showing on other resolutions.

      It shows on these:
      800x600
      1360x768
      1440x900

      but not these
      1024x768
      1152x648
      1152x864
      1280x720
      1280x768
      1280x800
      1280x900

      My CSS is right so I'm wondering if I did something wrong with the JS code.

      Here is my modification of the code above

      Code:
      <script type="text/javascript">
      
      function getcss(cssfile){
      loadcss = document.createElement('link')
      loadcss.setAttribute("rel", "stylesheet")
      loadcss.setAttribute("type", "text/css")
      loadcss.setAttribute("href", cssfile)
      document.getElementsByTagName("head")[0].appendChild(loadcss)
      }
      
      if(screen.width <= '800') 
      // Defines the resolution range you're targeting (less than 800 pixels wide in this case)
      
      {
      getcss('css/800m.css') 
      // Defines the .css file you want to load for this range (css/800.css)
      }
      
      else if(screen.width > '1024' && screen.width < '1152') 
      // This time we're targeting all resolutions between 1024 and 1152 pixels wide
      
      {
      getcss('css/1024m.css') 
      //And we want to load the .css file named "css/1024.css"
      }
      
      else if(screen.width > '1280' && screen.width < '1360') 
      // This time we're targeting all resolutions between 1280 and 1360 pixels wide
      
      {
      getcss('css/1280m.css') 
      //And we want to load the .css file named "css/1280.css"
      }
      
      else if(screen.width > '1440' && screen.width < '1600') 
      // This time we're targeting all resolutions between 1440 and 1600 pixels wide
      
      {
      getcss('css/1440m.css') 
      //And we want to load the .css file named "css/1440.css"
      }
      
      else
      
      {
      getcss('css/1680m.css')
      //This else statement has "if" condition. If none of the following criteria are met, load css/1680m.css
      }
      
      </script>
      Any idea on what I did wrong?

      Thanks.
  • Profile picture of the author sandywony
    That was a fantastic post. I tried it. This script works on adjusting screen size. If you have any other Java scripts share them.

    Thanks in advance
  • Profile picture of the author kl2000
    Use CSS media tag for responsive site designs
  • Profile picture of the author kl2000
    Example media query

    /* for 980px or less browser width */
    @media screen and (max-width: 980px) {

    #container {
    width: 94%;
    }

    #content {
    width: 65%;
    }

    #sidebar {
    width: 30%;
    }

    }
  • Profile picture of the author retroid
    ^ nice mate

    read more about responsive design with media query here
    Responsive Design with CSS3 Media Queries
  • Profile picture of the author talashme
    Thank you, its really save my time
  • Profile picture of the author Wellman
    Using CSS Media Queries would be much better!
    Thanks for sharing.

Next Topics on Trending Feed