Hi, I decided to ask a question which I've wondered about for a while: is it possible to display a different website according to the browser's screen resolution? For example, is it possible that in the body onload you put a code, and then you have all three different websites listed in the file, and the code analyzes the screen resolution, then chooses the appropriate website?
In my situation, I can't have a screen which pops up and asks for the resolution - it just wouldn't work. So, is it possible?
You can check the screen width of the viewing user by using screen.width
so to change the webpage for someone viewing a 800x600 resolution monitor you can do the following:
if (screen.width <= 800) window.location.href='if800.html';
Change if800.html to whatever you want.
When you have eliminated the impossible, whatever remains, however improbable, must be the truth !
Okay, so where would that go in the original file? I have to have the coding in the first .html file, so that it will open a second, alternate page if necessary. Would that code go in the head or the body of the page?
You can put that code in either the BODY or HEAD tag. I'd suggest making the page read as follows, if you were to take tabzter's approach:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
</head>
<body>
<p>
<script type="text/javascript"><!--
if (screen.width <= 800) window.location.href='if800.html';
//--></script><noscript>
Please enable javascript to view this webpage correctly!
</noscript>
</body>
</html>
However, since redirection can be a pain in the you-know-where, I'd suggest using a seperate JS file for the contents that will be written to the page.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
</head>
<body>
<p>
<script type="text/javascript"><!--
var scriptUrl;
if (screen.width <= 800)scriptURL="if800.js";
else if (screen.width <= 1024)scriptURL="if1024.js";
else if (screen.width <= 1152)scriptURL="if1152.js";
else if (screen.width <= 1280 && screen.width <= 768)scriptURL="if1280by768.js";
else if (screen.width <= 1280 && screen.width <= 960)scriptURL="if1280by960.js";
else if (screen.width <= 1280 && screen.width <= 1024)scriptURL="if1280by1024.js";
else scriptURL="else1600.js";
document.write("<script type=\"text\/javascript\" src=\""+scriptUrl+"\"><\/script>")
//--></script><noscript>
Please enable javascript to view this webpage correctly!
<br>
(Default resolution page goes here)
</noscript>
</body>
</html>
In this day-and-age, when we have things like CSS at our disposal, there really isn't a need to design resolution-specific layouts. In fact, it is frowned upon. You are only dancing around the problem. If you actually want to solve the problem, learn how to create a fluid layout using CSS and semantic (read: meaningful) markup. An accessible site is typically not only easier to design, but easier to maintain. Please look into the following sites:
That should be a decent starting point. You should also note that users without JavaScript will not be redirected to your "preferred" site layout for their resolution. If you need any further help after tinkering around with the layouts and information provided above, please post back.
I have this problem my site works fine in ie not firefox and not in either on small monitors.I was wondering if someone knew how i could fix this please and thanks
Reply With Quote
Bookmarks