javascript detect resolution and use specific css file

[calmchess]

I'm useing the following javascript to detect resolution and use a certain css file based on it do you see any unseen pit falls that i might face using it?

 

<SCRIPT language="JavaScript">
if ((screen.width>=1600) && (screen.height>=900))
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1600.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
else if((screen.width>=1440) && (screen.height>=768)&&screen.width<1600&&screen.height<=1024)
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1600.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}

else if((screen.width>=1440) && (screen.height>=768)&&screen.width<1600&&screen.height<=1024)
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1440.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}


else if((screen.width>=1360) && (screen.height>=768)&&screen.width<1440&&screen.height<=1024)
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1360.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}


else if((screen.width>=1280) && (screen.height>=720)&&screen.width<1360&&screen.height<=1024)
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1280.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}


else if((screen.width>=1152) && (screen.height>=864)&&screen.width<1280&&screen.height<=1024)
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1152.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}

else if((screen.width>=1024) && (screen.height>=768)&&screen.width<1152&&screen.height<=1024)
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1024.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
else
{
var headID = document.getElementsByTagName("head")[0];  
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './css/h1600.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
</script>

[haku]

The number one pitfall is that if the user has javascript turned off, they aren't going to get a CSS file fed to them.

[calmchess]

i thought of that but if they have java shut off they are going to be used to seeing pages messed up......I can accept the occasional user not getting a css file....thanks for the input.