Detect Resolution

[TheKiller]

Hello,

My site is best viewed in sizes bigger than 1024.
In 1024 it looks annoying...


So, i want to detect, If the visitors size is 800x600 or 1024x768, and give them an alert(), telling them,"The Site is best viewed in 1152x864 or highter" or something alike that...

[TheKiller]

@Jalarie, i have just tested it again n IE8 As i was checking something, and i noticed that it is working O.o

But it is saying:
« The Site is best viewed in 1152x864 or highter.You Are using 1152x864 Currently. »

Can it be that IE8 has its own resolution set in it and ignores the screen resolution?

[ctoz]

another 2¢ (not having read all the replies...):

Bear in mind that folks on multi-res monitors and using them at the lowest res may well be not very browser-savvy... so a message to tell them to shift up may just be an added frustration. I see this most days at my workplace: people who are amazing internet searchers, but have little knowledge of a browsers' innards.

I think it's a good idea to deliver as best you can to the user, whatever they're set up for. My approach has been to set a font-size in px on the body for resolutions above 1024 x 768; another for 1024 x 768, in a separate css file and accessed via js. This creates a constant starting point, overriding any browser variations or tweaking by users.

Then dimension all the main elements in ems, which kinda keeps things in proportion, no matter what the resolution, and aren't, like %ages, affected by resizing the window. Apart from aspect-ratio problems—usually avoided with a centred main div—it seems to work ok.

[TheKiller]

Man, my main point is to get the damn javascript code that dos the function as correct as possible. after that i will see what i will do to it. if i use it to modify the bit, that i dont like, or whatever.
Stop moanian around, of what i do, and try to answer my question, i dont want reasons on why i shouldnt do this, i want an answer on hw to do this ;D

THANKS

[jalarie]

« The Site is best viewed in 1152x864 or highter.You Are using 1152x864 Currently. »

Apparently, the piece displaying what is "Currently" being used is slightly different from what is doing the checking. I expect that you are checking the display area but showing the total size of the monitor.

[TheKiller]

hmm.. i use the script inside a .js file

if (navigator.appName == 'Netscape') {
W=window.innerWidth;
} else {
W=document.body.clientWidth;
}
if (W < 1152) {
document.write("<div style=\"text-align: center;\" class=\"navbar\"><div class=\"inner\"><span class=\"corners-top\"><span><\/span><\/span>");
document.write("&laquo; The Site is best viewed in <span style=\"color: #00AA00;\">1152x864</span> or highter.");
document.write("You Are using <span style=\"color: #AA0000;\"> "+screen.width+'x'+screen.height+"<\/span> Currently. &raquo;<br \/>");
document.write("<span class=\"corners-bottom\"><span><\/span><\/span><\/div><\/div>");
}

and loading it with this, in the body

<script type="text/javascript" src="{T_TEMPLATE_PATH}/Resolution.js"></script>

[jalarie]

You are checking window.innerWidth or document.body.clientWidth but displaying screen.width. Try it this way:

if (navigator.appName == 'Netscape') {
W=window.innerWidth;
H=window.innerHeight;
} else {
W=document.body.clientWidth;
H=document.body.clientHeight;
}
if (W < 1152) {
document.write("<div style=\"text-align: center;\" class=\"navbar\"><div class=\"inner\"><span class=\"corners-top\"><span><\/span><\/span>");
document.write("&laquo; The Site is best viewed in <span style=\"color: #00AA00;\">1152x864</span> or highter.");
document.write("You Are using <span style=\"color: #AA0000;\"> "+W+'x'+H+"<\/span> Currently. &raquo;<br \/>");
document.write("<span class=\"corners-bottom\"><span><\/span><\/span><\/div><\/div>");
}

[TheKiller]

Same result mate... Wait..
In ie8 it now says:

« The Site is best viewed in 1152x864 or highter.You Are using 1100x20 Currently. »

[jalarie]

Very good! You are apparently viewing in a slightly narrow but really short window. If not, it's probably IE being flakey.

[TheKiller]

umm...