Load CSS depending upon your visitors monitor resolution

Mostly all the web­pages are designed with 960px in width. This is because major­ity of the inter­net pop­u­la­tion uses monitr that sup­port 1024px res­o­lu­tion.
But if you con­sider the other part, those who uses mon­i­tor of high res­o­lu­tion say 1600.
In those mon­i­tors that web page will runs to the cen­ter leav­ing half of the space along right and left side of the site blank.
As we know very well that in a web page, space man­age­ment is very nece­sary.
So it will be nice if we could show more con­tent in less space and attract the vis­i­tors of our site.
To do that you can use javascript to find the res­o­lu­tion of the your visitor’s mon­i­tor and depend­ing on that you can load the css files.

A work­ing exam­ple can be found here.

Here is the javascript func­tion to find the resolution.

func­tion findResolution(base,css)
{
var sWidth = screen.width;
var res­o­lu­tion = 1024;
if (sWidth <= 1100) {
res­o­lu­tion = 1024;
}
else if (sWidth > 1100 && sWidth <= 1300) {
res­o­lu­tion = 1280;
slideWidth = 535;
}
else if (sWidth > 1300 && sWidth <= 1500) {
res­o­lu­tion = 1440;
slideWidth = 570;
}
else if (sWidth > 1500) {
res­o­lu­tion = 1600;
slideWidth = 635;
}
css = base+resolution+css;
document.write(‘<link rel=“stylesheet” type=“text/css” href=“‘+ css +’” />’);
}

In this find­Res­o­lu­tion func­tion the width of the visitor’s mon­i­tor is found out and depend­ing on that the res­o­lu­tion is set. And this func­tion accepts to para­me­ters. They are

1. base — baseurl of the loca­tion of the css files
2. name of the css file.

Work­ing:

I am using this script to load my site for 4 dif­fer­ent res­o­lu­tions 1024, 1280, 1440 and 1600. And i have four dif­fer­ent css file as 1024global.css, 1280global.css so on for respec­tive res­o­lu­tions. Now when call the ‘find­res­o­lu­tion’ func­tion from your header page.

findResolution(“http://www.yourdomain.com/css/”,“global.css”);

So that this func­tion links the cor­rect css file depend­ing on the res­o­lu­tion. By this you can make your site look dif­fer­ent and more attrac­tive in dif­fer­ent mon­i­tors. And even you can extend this func­tion to make your site load with dif­fer­ent con­tents depend­ing the res­o­lu­tion. i.e, you can have more con­tents for mon­i­tors with high res­o­lu­tion and vice versa.