View Full Version : redirect based on screen resolution

08-02-2007, 10:40 PM
Hello, I know how to detect the resolution of the screen using javascript but not how to use this to execute only some sections of html. I tried:

<SCRIPT TYPE="text/javascript">
if (screen.width == 1023 && screen.height == 768)

<div id="masthead"><a href="frametest.html" target="_parent">
<img src="title1024.gif" id="title" border=0></a>

<SCRIPT TYPE="text/javascript">

but that did not work. I could write all html in javascript using document.write"html") but would rather avoid it. I would rather avoid redirecting from a prior page to separate home pages so how can my desired effect be achieved?


08-02-2007, 10:47 PM
What about the users who have a resolution greater than 1024 x 768? Also why would you create something thats only viewable to that resolution? I'm guessing you were even thinking about the other users which isn't the right thing to do in web design. Either way here you go

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
a img {
<script type="text/javascript">
window.onload = function()
if(screen.width == 1024 && screen.height == 768)
var createLink = document.createElement('a');
var createImg = document.createElement('img');

<div id="masthead"></div>
It doesn't use document.write as thats not the right way to do things either. It uses DOM to create the link.

08-02-2007, 11:53 PM
Thanks, that is a clever way of doing it. It is handy to know javascript well. I am thinking about other resolutions too, I just used that one to keep things simple.

Im slowly getting there with these graphics. Cheers

08-03-2007, 02:01 AM
And did you think about users that have JavaScript disabled? Did you think of users with small screen devices (PDA/cell phone)? And I canít imagine that you are really addressing every possible screen resolution out there?

I think your approach isnít quite right. Webdesign in the 21st century isnít aiming at providing different content to different screen resolutions (as there are millions of different devices that are able to access the world wide web nowadays) but to provide the same content to all user agents (e.g. computer web browsers, screen readers, mobile/small screen devices, projectors, et al) and style it with CSS according to the capabilities of the respecive device/application. This includes the concept of graceful degradation (http://en.wikipedia.org/wiki/Graceful_degradation) (or fault-tolerant design (http://en.wikipedia.org/wiki/Fault-tolerant_design)) in all areas (CSS, JavaScript, & Flash), and not imposing anything on the user (like popup windows, browser size, Ö).

08-03-2007, 02:55 AM
You raise good points but before deciding to cater for all possible resolutions, PDAs, phones, and projectors etc I know the audience the web site is going to receive and the extent and depth of work justified for the nature of the project.

The web site is designed to display photos and a blog for close friends and family whilst im travelling. If it was for commercial gain I would indeed take into account your points as they are all valid as it would help me achieve a wider audience by making the site accessible to the majority of users.

08-03-2007, 03:28 AM
The other thing you need to consider is that the screen resolution has no relevance to the space available in the browser as the browser itself takes up some space, fixed toolbars on the desktop take up space, and not everyone has their browser maximized (particularly for larger screen resolutions).

08-03-2007, 01:56 PM
I think javascript has the screen.availheight/screen.availwidth command to find out the amount of browser space is available.