I found it on website but for me it seems doesn't work. The problem is that css doesn't change or changes very fast all i can see is black flash and blank page(.php it can be clearly see with firefox).Since i have no javascript skills , so i don't know what's wrong.
Main file
<html>
<head>
<title>my title</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function redirectCSS() {
if ((screen.width == 640) && (screen.height == 480))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 800) && (screen.height == 600))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 1024) && (screen.height == 768))
{ document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
// End -->
</script>
</head>
<body onLoad="redirectCSS()">
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
css style file
@charset "utf-8";
/* CSS Document */
body {
background-color: #2a2725;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0px 0px 1px #2a2725;
color: #fff;
}
/* }}} END TableSorter */
I found it on website but for me it seems doesn't work. The problem is that css doesn't change or changes very fast all i can see is black flash and blank page(http://gino16/inde.php it can be clearly see with firefox).Since i have no javascript skills , so i don't know what's wrong.
Main file
<html>
<head>
<title>my title</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function redirectCSS() {
if ((screen.width == 640) && (screen.height == 480))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 800) && (screen.height == 600))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 1024) && (screen.height == 768))
{ document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
// End -->
</script>
</head>
<body onLoad="redirectCSS()">
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
css style file
@charset "utf-8";
/* CSS Document */
body {
background-color: #2a2725;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0px 0px 1px #2a2725;
color: #fff;
}
/* }}} END TableSorter */
- It seems work on jsfiddle : jsfiddle/vLy3p . – Eray Commented Jan 29, 2011 at 20:56
- 2 Google for "CSS media queries" -- there's are easier ways to do this! – Pointy Commented Jan 29, 2011 at 21:00
4 Answers
Reset to default 3Try using CSS Media Queries, they do exactly what you want :)
You are overwriting the content of the page. document.write after onload overwrites the whole page. Instead of putting it in a function, you need to execute the JavaScript in the header while the page is loading.
<script type="text/javascript">
if ((screen.width == 640) && (screen.height == 480))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 800) && (screen.height == 600))
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 1024) && (screen.height == 768))
{ document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
else
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
</script>
Some more remarks:
1) Remember to incude a "general" stylesheet without using JavaScript, for the users and browsers who don't want to or can't support JavaScript.
2) language="JavaScript" is out-of-date. Use type="text/javascript" instead.
3) It's no need to "ment out" the JavaScript
4) Keep in mind that the screen size has nothing to do with the view port (browser window) size. No everyone maximizes their browser window.
5) And most importantly: There is no real reason to use JavaScript for this anymore. Unless you really, really, really need to support IE, then you can use CSS3 Media Queries. See this question for an example: Fluid layouts with CSS
You may NEVER do a document.write after page load. You need to call the function inline like this (and it helps if you have different css files too)
<html>
<head>
<title>my title</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function redirectCSS() {
if ((screen.width == 640) && (screen.height == 480))
{document.write("<link href='small.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 800) && (screen.height == 600))
{document.write("<link href='medium.css' rel='stylesheet' type='text/css'>")}
else if ((screen.width == 1024) && (screen.height == 768))
{ document.write("<link href='large.css' rel='stylesheet' type='text/css'>")}
else
{document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
redirectCSS()
// End -->
</script>
</head>
<body >
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
I would personally do this if I had to do it:
<html>
<head>
<title>my title</title>
<link href='style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript"><!-- Begin
var css = "";
if (screen.width < 800) css='small.css';
else if (screen.width < 1024) css='medium.css';
else css='large.css';
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />");
// End -->
</script>
</head>
<body >
<h1>Use the appropriate stylesheet to display this content</h1>
</body>
</div>
</html>
Not sure that it works well, in some cases you always will have a problem with your layouts. Standard declaration for css:
link rel="stylesheet" type="text/css" href="css/style.css"
link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"
link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)"
href="css/medium.css"
link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"
Browser will change a view even when you resize it.