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.
Click to expand...

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">
<!--
Click to expand...

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

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.
Click to expand...

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.
Click to expand...

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.
Click to expand...

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">
Click to expand...

You can safely drop the "language" attribute ...
<!--
Click to expand...

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)
Click to expand...

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.
Click to expand...

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
Click to expand...

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
Click to expand...

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!
Click to expand...

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!!!
Click to expand...
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.
Click to expand...
How can I set the users computer (or page) to match what I want it to make
the page look it's best???
Click to expand...

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

Similar Threads

Resolution in IE web page 0
Centering picture element for larger screen sizes 2
Resizing images per screen resolution 5
My JSP/Javascript page looks differently on 2 different machines 0
redirect visitors based on both screen resolution and browser 2
resolution change 3
Having difficulty with the layout of these images / video for this web page 2
Multiple screen in wxphyton 0

Members online

Total: 88 (members: 4, guests: 84)
Robots: 365

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,818
Latest member
Brigette36

Latest Threads

Top