Forum Moderators: open

Message Too Old, No Replies

Screen Size Determines Style Sheet

         

RegGFX

8:27 pm on Mar 17, 2005 (gmt 0)

10+ Year Member



I'm using Javascript to call the correct style sheet based on the clients screen size.

Could someone help me or suggest what i've done wrong in the script below? I'm trying to define a screensize range in my Javascript and...... its not working.

<html>
<head>
<title>Stylesheet based on Screen Type</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="800.css">
</head>
<body>
<script type="text/javascript">
winWidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;
if (winWidth >= 800 ¦¦ winWidth<1024) {
document.write('<link rel="stylesheet" type="text/css" href="800.css">');
}
else if (winWidth >= 1024 ¦¦ winWidth<1152) {
document.write('<link rel="stylesheet" type="text/css" href="1024.css">');
}
else if (winWidth >= 1152) {
document.write('<link rel="stylesheet" type="text/css" href="1152.css">');
}
</script>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ScreenType">&nbsp;</td>
</tr>
</table>

<table id="mainTable" border="1">
<tr>
<td class="row1">cell one content
</td>
<td class="row2">cell two content
</td>
</tr>
</table>
</body>
</html>

Bernard Marx

11:29 pm on Mar 17, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Seems OK to me. Try writing text into the document, rather than stylesheet tags, to see if the conditions are working OK. Otherwise, it may be a cascading issue.

PS. This structure will do the same thing "First past the post".

if (winWidth<1024) {

}
else if (winWidth<1152) {

}
else{

}

Are you sure you don't want to measure [b]screen[/i] size instead of browser inner-window size?