Apply different CSS stylesheet depending on browser window size - I can't find anything definitive

Question

help me please if you'd be so kind...

I am having some difficulty pinpointing how best to go about this, as Google's new algorithm isn't being very helpful with my (spot on) search terms.

My site is 100% fluid width and I need to change stylesheets for users at 1152 / 1024 and below. I started off with the following piece of jscript to detect the resolution and apply these new stylesheets, but it doesn't work in IE - just great.

I understand that a stylesheet based on the actual browser window is best, but the content has a max-width of 1280px, so huge resolutions with minimised window's won't be affected I hope, and I doubt users will bother to minimise their windows if they're on resolutions on 1024 and below.

Here's my current code placed in the head:

<script type="text/JavaScript">
var screenwidth = screen.width;
if (screen.width < 1280){
document.write('<link rel="stylesheet" href="/Assets/Templates/Common/Public/1024res.css" type="text/css" media="screen" />');
}
</script>

So, my questions are: 1) Why doesn't this work in IE? And 2) Is this the best route, especially considering jscript may be disabled? Does anyone know how best to achieve this?

Any help - much appreciated!

Answer 1

The Non-javascript method:

<link rel="stylesheet" media="screen and (min-device-width: 1152px)" href="800.css" />

See: http://css-tricks.com/resolution-specific-stylesheets/