Javascript to detect screen width and choose a css sheet?

[ciscoguy24]

Is it possiable to use javascript detect the user's screen width and then load a css file that fits there screen?

[pcthug]

No js needed use this:


<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="stylesheet2.css" rel="stylesheet" type="text/css" media="print" />
<link href="stylesheet3.css" rel="stylesheet" type="text/css" media="handheld" />


The important part is the media="???" part.
The screen attribute is for Normal Computers and Latops.
The print attribute is for when some body prints your page, you may want to set this page up so it has clearer text, and possibly less use if no color at all.
And finally the handheld attribute is for small screened, and handheld devices

Although there are more attributes you can use these are the only ones that are widley supported.

[ciscoguy24]

No js needed use this:


<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="stylesheet2.css" rel="stylesheet" type="text/css" media="print" />
<link href="stylesheet3.css" rel="stylesheet" type="text/css" media="handheld" />


The important part is the media="???" part.
The screen attribute is for Normal Computers and Latops.
The print attribute is for when some body prints your page, you may want to set this page up so it has clearer text, and possibly less use if no color at all.
And finally the handheld attribute is for small screened, and handheld devices

Although there are more attributes you can use these are the only ones that are widley supported.

Ok but how does it know which one to use? Like if a user is below 1024 x 768 or above 1024 x 768?

[JPnyc]

Yeah, you need to test for screen.availWidth. I've seen people who test for both width and height but to me the width is enough

[ciscoguy24]

Yeah, you need to test for screen.availWidth. I've seen people who test for both width and height but to me the width is enough

Ok cool what would the code be do you know? I don't know javascript at all


adam

[Elliott Hird]

if (screen.availWidth == 800) {
document.write('...800x600 link tag...');
}

repeat that changing availWidth check to the one you want.

[ray326]

Is screen a standard ECMAscript object?