/    Sign up×
Community /Pin to ProfileBookmark

Resizing Page Based On Screen Resolution

Copy linkTweet thisAlerts:
Jun 21.2007

Hey All! I’m designing a webpage and I want javascript to detect the users screen resolution (800×600 etc…) and then redirect them to the page that will suit their resolution (e.g. 800×600.html or 1024×768.html etc…). Here’s what I have, but it doesn’t work.

[code=php] <SCRIPT type=”text/JavaScript”>

if ((screen.width>=800) && (screen.height>=600))
{
document.writeln(‘<link rel=”html” type=”text/html” src=”800×600.html” />’);
}
if ((screen.width>=1024) && (screen.height>=768))
{
document.writeln(‘<link rel=”html” type=”text/html” src=”1024×768.html” />’);
{
else
{
document.writeln(‘<link rel=”html” type=”text/html” src=”800×600.html” />’);
}

</SCRIPT>[/code]

I put it in the head + body but it didn’t work. If you don’t understand what I’m trying to do please let me know.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@cridleyJun 21.2007 — Try window.location property. Also close your braces } properly!

The order of the ifs matters here as in your code anything that is true for the second condition is also true for the first;

[code=html]<SCRIPT type="text/JavaScript">
if ((screen.width>=1024) && (screen.height>=768))
{
window.location = "1024x768.html";
}
else if ((screen.width>=800) && (screen.height>=600))

{
window.location= "800x600.html";
}
else
{
window.location = "800x600.html";
}

</SCRIPT> [/code]

Hope it helps.
Copy linkTweet thisAlerts:
@cridleyJun 21.2007 — Also, just notice you have only two variations, and there's no point checking both width and height when one will do, so:

Try window.location property. Also close your braces } properly!

The order of the ifs matters here as in your code anything that is true for the second condition is also true for the first;

[code=html]<SCRIPT type="text/JavaScript">
if (screen.width>=1024)
{
window.location = "1024x768.html";
}
else
{
window.location = "800x600.html";
}

</SCRIPT> [/code]
Copy linkTweet thisAlerts:
@cridleyJun 21.2007 — You could just put it on one line though:
[code=html]
<SCRIPT type="text/JavaScript">
window.location = (screen.width>=1024)?"1024x768.html":"800x600.html";
</SCRIPT>
[/code]
Copy linkTweet thisAlerts:
@Kostas_ZotosJun 21.2007 — Hi,

I think you can get the same results with something like this (a bit different implementation, if you don't mind.. ? ):

[COLOR="Navy"]<script type="text/javascript">

[INDENT]var Target_URL="800x600.html";

if (screen.width>=1024 && screen.height>=768) Target_URL="1024x768.html";

window.location=Target_URL; [COLOR="Purple"]//This will redirect the current page, to whatever HTML file the variable "Target_URL" represents.[/COLOR][/INDENT]</script>[/COLOR]

--------------------
Kostas
Copy linkTweet thisAlerts:
@tiberiusjojoauthorJun 21.2007 — How 'bout this?

[code=html] <SCRIPT type="text/JavaScript">
if ((screen.width>=1024) && (screen.height>=768))
{
window.location = "1024x768.html";
}
else if ((screen.width>=800) && (screen.height>=600))

{
window.location= "800x600.html";
}
else if ((screen.width>=1152) && (screen.height>=864))
{
window.location = "800x600.html";
}
else
{
window.location = "800x600.html";
}

</SCRIPT> [/code]
Copy linkTweet thisAlerts:
@felgallJun 21.2007 — Of course people with higher screen resolutions rarely have their browser open full screen. You would do better to test the space inside the browser window instead of the much larger screen size.
Copy linkTweet thisAlerts:
@tiberiusjojoauthorJun 22.2007 — alright, i got it to work, thanks for you help. Here's what I have

[code=html] <SCRIPT type="text/JavaScript">
if ((screen.width>=1152) && (screen.height>=864))
{
window.location = "1152x864.html";
}
else if ((screen.width>=1024) && (screen.height>=768))

{
window.location= "1024x768.html";
}
else if ((screen.width>=800) && (screen.height>=600))
{
window.location = "800x600.html";
}
else
{
window.location = "800x600.html";
}

</SCRIPT> [/code]

It's for a school so I want it to be compatible with all resolutions. And your right the people with large resolutions will do that. But the biggest I'm going is 1152 x 864. And if they have above or below it reverts to 800 x 600. Also I'm aware that some people have javascript disabled so I put in a message with a link to 800 x 600 or asking them to enable javascript. Thanks again!
×

Success!

Help @tiberiusjojo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...