screen resolution

P

Prophet

when I first started to write my page, I had my settings at 1024 x 768.

I then saw the page on a 800 x 600 computer - wow - what a difference!!!

I then went back and redid my page at 800 x 600.
now when I look at the page at a higher resolution, I am not happy with it.

How can I set the users computer (or page) to match what I want it to make
the page look it's best???

Thank you!!!!
 
W

web.dev

Hi Prophet,

Here's one solution. Try using the Screen object to see what the
user's current resolution is. Example:
window.screen.width and window.screen.height.

Pro:
You get what you want. i.e., you can make your page in different
resolutions and serve the correct the page depending on your user's
resolution.

Con:
If you have a big website, this can become a maintenance nightmare.
 
P

Prophet

web.dev said:
Hi Prophet,

Here's one solution. Try using the Screen object to see what the
user's current resolution is. Example:
window.screen.width and window.screen.height.

as I am fairly new to this I am not sure how to use this...do I put in a
value for the height or width?
 
W

web.dev

Hi Prophet,

You can do something like the following:

<script language = "javascript" type = "text/javascript">
<!--
var x = window.screen.width;
var y = window.screen.height;

if(x == 1024 && y == 768)
{
url = "page1.html"; //the url to the page for viewing in 1024x768
resolution
}
else if(x == 800 && y = 600)
{
url = "page2.html; //the url to the page for viewing in 800x600
resolution
}

location.href = url; //redirect the user to the appropriate page
//-->
</script>

Don't forget to place the script in the <head> element. One more
thing, another con of this approach, the user can't effectively use the
'Back' button, because this script will keep taking them to the page
designated.
 
L

Lee

web.dev said:
Hi Prophet,


You can do something like the following:

<script language = "javascript" type = "text/javascript">
<!--

Neither the language attribute nor the SGML comment serves any purpose.
var x = window.screen.width;
var y = window.screen.height;

You really only need to look at either the width or the height.
Screen dimensions are fairly well standardized. It will also be
easier to maintain if the main page is designed for the higher
resolution, and you only redirect for anything smaller. Using
location.redirect() allows the Back button to function normally:

if (screen.width<1024) {
location.replace("smallerVersion.html");
}
 
L

Lasse Reichstein Nielsen

(Please cite some of the message you are responding to)
Here's one solution. Try using the Screen object to see what the
user's current resolution is. Example:
window.screen.width and window.screen.height.

Bad idea, generally.
Pro:
You get what you want. i.e., you can make your page in different
resolutions and serve the correct the page depending on your user's
resolution.

But the user's resolution is completely irrelevant. It fails to
provide any information about how the page looks.
- it does not say how many pixels the page will have available.
It's the browser size, not the screen size, that is relevant
for that.
- It doesn't say how big the pixles are (my 14' laptop monitor
does 1440x1050 whereas the old 15' monitor next to it only
does 1024x768).
Con:
If you have a big website, this can become a maintenance nightmare.

Absolutely. And remember that there are screen sizes other than
800x600 and 1024x768. Many, in fact. And even more browser sizes.

/L
 
L

Lasse Reichstein Nielsen

web.dev said:
You can do something like the following:

<script language = "javascript" type = "text/javascript">

You can safely drop the "language" attribute ...

and the HTML comment.
var x = window.screen.width;
var y = window.screen.height;

if(x == 1024 && y == 768) ....
else if(x == 800 && y = 600)

What if my screen is not one of those two? In fact, it is 1600x1200.
Other common widths are 1152, 1280 and 1440. Heights can differ too,
sometimes independently.

If this should be worth anything, it should be based on browser
type, and not have these "dead angles", where it can't see what
to do. Something like:

var bw = window.innerWidth
|| (document.compatMode == "CSS1Compat" ?
document.documentElement: document.body).clientWidth
|| 800;
location.replace((bw <= 800) ? "page1.html" : "page2.html");

....
Don't forget to place the script in the <head> element. One more
thing, another con of this approach, the user can't effectively use the
'Back' button, because this script will keep taking them to the page
designated.

Use location.replace then. It replaces the current page in the browser
history, so the redirection page is not there.

/L
 
R

RobG

Lasse Reichstein Nielsen wrote:
[...]
- It doesn't say how big the pixles are (my 14' laptop monitor

14' = 4.267 metres!!

That ain't a laptop, that's a billboard - I'd like to see you totin'
that sucker on the bus!

:)
 
L

Lasse Reichstein Nielsen

RobG said:
Lasse Reichstein Nielsen wrote:
[...]
- It doesn't say how big the pixles are (my 14' laptop monitor

14' = 4.267 metres!!

That ain't a laptop, that's a billboard - I'd like to see you totin'
that sucker on the bus!

Rightie! That should ofcourse have been inches, not feet. :p

/L 'message = message.replace(/(\d)'/,"$1\"");'
 
C

Christopher Benson-Manica

Prophet said:
I then saw the page on a 800 x 600 computer - wow - what a difference!!!
I then went back and redid my page at 800 x 600.
now when I look at the page at a higher resolution, I am not happy with it.
How can I set the users computer (or page) to match what I want it to make
the page look it's best???

If what you're going for is relatively simple, it should be possible to
use stylesheets to make your page look reasonable at any resolution.
Percentage sizes can be your friend. It sounds like you should also
look at your page with a variety of web browsers - the results may not
be what you're expecting.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,787
Messages
2,569,630
Members
45,334
Latest member
66Zeinab9

Latest Threads

Top