Archive for the 'CSS [Cascading Style Sheets]' Category

Return different stylesheets based on screen resolution

Saturday, January 28th, 2006

A friend of mine wanted to use 2 different stylesheets, based on the screen resolution of the browsing computer. He found this script to differentiate between users with screens < 800 width, and users having bigger.

Unfortunately, with cookies disabled, you will find yourself browsing an endless looping white page. So I showed him how to do this the right way; and I thougth I might share it with anyone searching for something similar

<link rel="stylesheet" type="text/css" media="all" href="style_800x600.css" id="style_low" />
<link rel="alternate" type="text/css" media="all" href="style_1024x768.css" id="style_high" />
<script type="text/javascript">
function checkStyle(){
    if (screen.width > 800){
       document.getElementById('style_low').rel = 'alternate';
       document.getElementById('style_high').rel = 'stylesheet';
    }
}
window.onload = checkStyle;
</script></link>

Posted in CSS [Cascading Style Sheets], Javascript | No Comments »