View Full Version : Resolution
Hi,
I have made a script which you put on every page of your web site and on the onload it determins what resolution you have and then zooms in or out
accordingly.
There is only one problem with the script which is that the font sizes really does muck up.
Can any one help?
However, if it made all my widths and heights into percentages instead just numbers would this fix the resolution problem?
Code For The Zoom In And Out Script:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY onload="pixcel()">
<Script Language="JavaScript">
function pixcel() {
if (screen.width == 640)
if (screen.height == 480)
{
if (window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=0.9; else window.parent.document.body.style.zoom=0.9;
if (window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=0.9; else window.parent.document.body.style.zoom=0.9;
}
if (screen.width == 800)
if (screen.height == 600)
{
if(window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=0.9; else window.parent.document.body.style.zoom=0.9;
}
if (screen.width == 1152)
if (screen.height == 864)
{
if (window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=1.1111111111111111111111111111111111111; else window.parent.document.body.style.zoom=1.11111111111111111111111;
}
if (screen.width == 1280)
if (screen.height == 1024)
{
if (window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=1.1111111111111111111111111111111111111; else window.parent.document.body.style.zoom=1.11111111111111111111111;
if (window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=1.1111111111111111111111111111111111111; else window.parent.document.body.style.zoom=1.11111111111111111111111;
}
else
{
window.parent.document.body.style.zoom!=0
}
}
</Script>
</BODY>
</HTML>
Borgtex
11-03-2002, 09:21 PM
Zoom in/out it's not a very good solution for resolution compatibility. Try to use tables and cells with percentages, tiled or large backgrounds, etc. You also can use different stylesheets for every resolution.
By the way, here's a compact version of your script:
function pixcel() {
resol=screen.width
zoomfact=1
if (resol==640 || resol==800) {zoomfact=0.9} else {if (resol==1152 || resol==1280) zoomfact=1.11111111111}
curzoom=window.parent.document.body.style.zoom
window.parent.document.body.style.zoom=(curzoom!=0)?curzoom*zoomfact:zoomfact
}
realisis
11-03-2002, 10:30 PM
also, here's a couple of other issues and scenarios that might not have occured to you:
1) you should be checking for "smaller than" rather than "equals to", and don't assume that the standard dimensions are the only ones available. I was sniffing a friend's variables while she visited my site. She runs her own server, and can set her monitor resolution to non-standard dimensions: her *screen* was set to 900x700...
Furthermore, my own monitor is 1024x768, but because I set my desktop toolbar on the RIGHT SIDE (rather than at the bottom like most people), any website checking my screen.width without also checking my screen.availWidth is making assumptions about how much space I really do have available to me.
2) second, there's no guarantee that a visitor will have their browser maximized when surfing. Checking for dimensions of the browser window might be better than checking for screen, but that opens up its own can of worms, cuz visitors might resize their browser while on your page, and then you have to check for resizing, etc...
3) sniffing the *inner* dimensions of the window is best, because different users might have the same size monitor and browser window, but they may also have different amounts of chrome. I often see attempts at "custom-fitting" pages or images to 800x600 without the designer having realized that the height of the viewer's viewport is much less than 600 pixels, because of browser chrome. So the user still gets a vertical-scroll even though the designer tried to circumvent it.
EDIT: corrected typos...
MCookie
11-03-2002, 11:59 PM
Like Borgtex said; try to use tables and cells with percentages. These are screen resolutions from the past weeks from a fashion design site.
11275 43.5% 800x600
10853 41.9% 1024x768
1270 4.90% 1280x1024
998 3.85% 1152x864
479 1.85% 640x480
251 0.96% 1600x1200
157 0.60% 1152x870
155 0.59% 1280x960
90 0.34% 1400x1050
64 0.24% 832x624
50 0.19% 1152x768
43 0.16% 960x720
39 0.15% 560x420
28 0.10% 1600x1024
17 0.06% 2048x768
14 0.05% 2560x1024
12 0.04% 1280x854
11 0.04% 1280x768
9 0.03% 720x480
7 0.02% 1056x792
6 0.02% 720x576
6 0.02% 800x553
5 0.01% 1024x600
5 0.01% 1920x1200
5 0.01% 1600x1280
4 0.01% 1280x800
4 0.01% 1280x720
3 0.01% 1600x600
3 0.01% 848x480
2 0.00% 800x574
2 0.00% 8192x768
2 0.00% 896x600
2 0.00% 1024x742
1 0.00% 2304x864
1 0.00% 240x320
1 0.00% 512x384
1 0.00% 640x960
1 0.00% 795x551
1 0.00% 1260x980
1 0.00% 1152x921
1 0.00% 960x1280
1 0.00% nullxnull
1 0.00% 1800x1440
1 0.00% 1024x780
1 0.00% 1856x1392
1 0.00% 1536x1152
1 0.00% 1024x721
1 0.00% 2304x1440
1 0.00% 1024x480
krycek
11-04-2002, 12:52 AM
um, personally if I was going to create a zooming script like this, instead of checking each and every resolution value, I would write a generic function to use a ratio.
e.g. in your case:
zoom
-------------------
resolution * multiplier
so, 0.9 / 800 = 0.001
& 1.1 / 1280 = 0.0009
so I would assume a multiplication factor of around 0.001 is what you are after.
Hence my script would be:
function pixcel() {
resol=screen.width
zoomfact=1
zoomfact=resol*0.001
curzoom=window.parent.document.body.style.zoom
window.parent.document.body.style.zoom=(curzoom!=0)?curzoom*zoomfact:zoomfact
}
That is simply a modification of the script Borgtex posted.
I do agree with realisis about using the resolution of the monitor, though - the only way you can do anything about that is either to open a window with exact specs (i.e. no toolbar, set size etc.) or else use the available dimensions of the window. And as realisis said, you would then get resize problems etc. and to be honest, writing a script to change the sizes or EVERYTHING on the fly whenever a window resizes would NOT appeal to me!
But there we go, just my 2p in case you decide to go down that route :)
::] krycek [::
Thank All For your help...
******* Microsoft for inventing so many resolution and other OS for that....
Roy Sinclair
11-04-2002, 09:47 PM
Originally posted by 101
Thank All For your help...
******* Microsoft for inventing so many resolution and other OS for that....
Blame the right people for the problem you perceive, it's the video card vendors who make the various resolutions. But designing web pages based on screen resolutions isn't a good idea in the first place since new devices are trying to connect to the web all the time and they introduce even more resolutions (you're not going to get 800x600 on a cell phone).
Getting hung up on video resolutions is often an indication that the "look" of a page has overtaken the "content" of the page in importance to the developer of the page and that should not be the case. For a good web page, content should always be the driving factor.
lavi557
11-05-2002, 02:53 AM
Originally posted by Roy Sinclair
Blame the right people for the problem you perceive, it's the video card vendors who make the various resolutions. But designing web pages based on screen resolutions isn't a good idea in the first place since new devices are trying to connect to the web all the time and they introduce even more resolutions (you're not going to get 800x600 on a cell phone).
Getting hung up on video resolutions is often an indication that the "look" of a page has overtaken the "content" of the page in importance to the developer of the page and that should not be the case. For a good web page, content should always be the driving factor.
So true, I used to, and still often have that problem. Designing sites based on resolutions is often a bad idea. Trust someone who has been there. It really is terrible if you have to go back and edit an awesome idea because you designed it for too high of a resolution. Save yourself sometime by taking the time to edit an idea for every resolution.
beetle
11-05-2002, 05:41 AM
Not to mention that the zoom CSS rule is IE5.5+ ONLY. It's odd to create a device meant to handle so many different users but is less flexible than what it is trying to enforce.
In the world of PC-viewed webpages, no-one has commercially made the jump away from 800x600 as a minimum, yet.
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.