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...

[incrediBILL]

What's the purpose of telling someone with a small screen they need as bigger screen?

My phone, iPad, or netbook can't address the situation and the message is annoying.

Trust me, people know they aren't seeing it at it's best but it's unavoidable.

[TheKiller]

They get a bigger screen size and see the page correctly.
I care more abuot what you see on a computer and not on a phone...

I only want them to be notifyed about this if they use 800x600 or 1024x768.. if its smaller i dont want any action taken

So your iPad etc wont be affected...


The code should be something alike this:

function() {

if ((screen.width>=800) && (screen.height>=600))
{
document.write('Your resolution is "+screen.width+"x"+screen.height+" Please switch to at last 1152x864');
}

else if ((screen.width>=1024) && (screen.height>=768))
{
document.write('Your resolution is "+screen.width+"x"+screen.height+" Please switch to at last 1152x864');
}


else
{
document.write('');
}
});

[incrediBILL]

But my netbook or laptop will and I probably won't run to a bigger screen just to see your site, as long as you aren't making it an alert that pops up it's fine.

Better to have a more fluid adaptive design that stops resizing around 1024 has been my approach, any screen size smaller just scrolls, the 800x600s can like it or lump it ;)

Netbook is my minimal design goal with the native screen set to max width, length you can't do anything about really.

[TheKiller]

I Have reconsidered using an alert, and use document.write() instead.

I Just want the javascript that detects it to start. then i will decide what to do to it.i may just use the script to change a div and arrange my Google Ad banner.

So, could you help here? :)

Edit:
wew... didnt notice you were a MOD

[incrediBILL]

My being a mod has nothing to do with being opinionated, I'm not a mod of this forum, just had to toss in my $0.02 worth as I've been designing software and doing focus groups for nearly 30 years, I get a bit of a feel for what pushes peoples buttons.

Plus you should hear my wife, kids, friends and inlaws harp about websites. OMG.

Making the script change a div or move something isn't hard, you just change those object properties as needed.

I'm sure you can do it, you seem skilled, I have faith!

[lucy24]

What's the purpose of telling someone with a small screen they need as bigger screen?

I don't think that's what he's trying to tell them. I think he wants them to change their monitor resolution so you can squeeze more stuff into the same physical area. Which means that all the text becomes smaller and you need to go back and change your browser settings-- which may or may not have an option for "enlarge text only"-- and then open your browser window so it takes up the full width of the screen, and, and...

[rocknbil]

Yeah you may want to rethink this. Dictating the environment to a user is always a Very Bad Idea. It wouldn't take a lot of work to let them see the site properly at **any** resolution. So it has side scroll bars, big deal.

Add to this, if they are struggling along with a smaller monitor they may have their system trimmed down and have Javascript disabled, it happens.

Food for thought from 1996 [anybrowser.org]

[TheKiller]

@incrediBILL
I Was just saying that, as i didnt noticed you were, and though you were just a random member that just wants to put questions on why i want to do that instead of helping :p
But i was surely wrong.My Apologizes :-)

I am okay with HTML, CSS And PHP. But i barelly know anything about JavaScript.......

@lucy24
Yep ! Thats exactly what i want to do ! :)
I want to detect if they use 800x600 or 1024x768 and show them a message on the header, asking them if they want to switch to a highter size for a better view of the site.

Also my main reason in doing this is because my google banner gets outside of the style if the resolution is smaller than 1152x864.....

Have a look [rising-dead.com...]

View the page in 1024x768 and 1152x864.......

Also its kinda getting annoying to explain my reasons.
Could anyone please help me with a script that Detects if the visitor uses 800x600 or 1024x768 ?

[jalarie]

incrediBILL
Netbook is my minimal design goal.

That sounds like an interesting goal. What is the display width and height of a Netbook?

[TheKiller]

jalarie, stop wanting to prove someone hes wrong,or whatever.
better try to be helpful here :P

[jalarie]

TheKiller
jalarie, stop wanting to prove someone hes wrong, or whatever. better try to be helpful here :P

I have no interest in proving anything. I simply asked, "What is the width and height of a Netbook," because I wish to know.

[edited by: jalarie at 9:58 pm (utc) on May 16, 2011]

[Leosghost]

receptional_andy ( mod here )[webmasterworld.com ]

Has a page here [andylangton.co.uk] that will explain to you, how to do what you want with javascript.

[lucy24]

I looked it up. They range from 7 to 12 inches (width, not diagonal), with 9-10 the norm. 10 inches gives a maximum resolution of 1024. In ppi terms that's equivalent to changing my current monitor resolution from 1600, where I'm comfortable, to 1920, where I'm not. Assuming of course that your Netbook's entire window is taken up with the browser screen.

[jalarie]

TheKiller
jalarie ... try to be helpful here

Could anyone please help me with a script that Detects if the visitor uses 800x600 or 1024x768 ?

The screen.width tells how wide the physical screen is, but the user might have the browser window using only a part of that. I think the following will do exactly what you want:

<script type="text/javascript">
 if (navigator.appName == 'Netscape') {
 W=window.innerWidth;
 } else {
 W=document.body.clientWidth;
 }
 if (W < 1152) {
 alert("The Site is best viewed in 1152x864 or highter");
 }
</script>

[tangor]

Coming to this a bit late...

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...

Consider me, and perhaps a few (zillion) other potential visitors hitting the back button. I run an WSXGA+ (1680) screen with three concurrent apps running at any given time ON SCREEN (divide by 3 horizontally).

What your desire to determine the resolution of the visitor is really good for is creating a database info of which resolutions are popular, which visit, and then CODE YOUR SITE TO MATCH for best effort... and let those visitors outside of those ranges deal with the results. I do, as a user, unless the site p[sses me off.

The LAST thing any visitor wants to hear is "You must be THIS tall or THIS wide to ENTER." Kids think that is funny for parents, but parents are extraordinarily p[ssed when applied to them.

Use that js for data/research purposes rather than fronting "Your equipment is not good enough", "You're an idiot for not having the latest" or list up any other "You're not..." slaps in the face. You'd be surprised how many users are insulted by "For best results..." because that implies from the get go THEY ARE NOT AMONG THE BEST... Psycho babble, of course, but hasn't changed since the Gauls me the Romans or the Mongols met the Huns...

BY THE SAME TOKEN there is a limit to where we, as webmasters, can lowest common denominator for screen resolution. I date back to 640x480. Wow, when 800x600 came in it was a wonder... and took eight years to see the lowest common visitor have that resolution. 1024 is our 640 these days and that's due to best res on netbooks and small laptops. Next res to shoot for is not the xga+ (1152 - 2.2% users) under discussion (only 90ish useable pix better than xga (1024 - 12% users) is wxga to sxga (1280 to 1440 - near 50% users) and all the rest (1600 and up - all the rest%)

Personally I won't code for less than 100% of the resolutions, ie. a FLUID LAYOUT, but that's just me. :)

[TheKiller]

lol ok ;)

WOW !
Jalarie, thats exactly what i wish to do !
But im just going to use document.write() instead of alert.
There is just one small problem.Your script seems to work in FF.But not into the damn old IE8

Would there be a way to make the function work in all brosers?or at last IE, others seem to use it...


@tangor, i am just telling them that the site is best viewed in the x resolution. if they want to switch that,or not.its their decision.

[jalarie]

I only tested it in Opera, IE6, FireFox, Mozilla, Netscape4, Netscape7, Ace Explorer, and SlimBrowser. Sorry, I don't have IE8.

[lucy24]

i am just telling them that the site is best viewed in the x resolution. if they want to switch that,or not.its their decision.

Why do you need to tell them at all? Surely you can trust people to see for themselves that there is a scrollbar at the bottom of their browser window, and to take the appropriate action. That means resizing the window if they feel like it. Changing their entire screen resolution is not going to happen unless you have the most phenomenally gorgeous site in the world. And probably not even then.

For visitors of a certain age, "best viewed" statements hark back to the days of "best viewed with browser A or maybe (if the designer is feeling generous) B, and the rest of you can just go eat trout-cream".

[TheKiller]

@Jalarie, i asked someone to test in IE6 And she dosnt see anything... (she uses 1024)
But she sees the text if she opens it in FF

@Lucy, BECAUSE They need to know,they will see it better in that resolution.

Maybe some are idiots, and dont know the site look, changes under a highter resolution.

Also,i just figured out that it Encourages peoples to use highter resolutions,and get further to newer ones. Not resolutions from ages ago.....

It is not about,the style look,its about the Google Banner being bigger into resolutions smaller than 1157....

And obviously the style looks a bit nicer with a bigger resolution :P

Edit:

I Have just Put the Script online !
If anyone wants to look, the url is some posts above...

[jalarie]

TheKiller
@Jalarie, i asked someone to test in IE6 And she dosnt see anything... (she uses 1024) But she sees the text if she opens it in FF

You put the script BETWEEN the head and body sections. You can put it WITHIN the head and use alert, or put it WITHIN the body and use either alert or document.write, but nothing goes between.

[TheKiller]

yea, i though thats how it should be to show outside the main area... but that area seems to be set into the wrap id and not the body.i fixed it now

I see that the back slashes from the html i use into the js is giving errors when validating.
Is there any way to fix that?

I though putting the entire code into a js file and load...

Could you make the script work in ie too?

EDIT:
Just put the script into a js file,and the errors are gone.
from 45 Errors, 1 warning(s) i got 30 Errors
need to fix those somehow lol

[jalarie]

You need a backslash just before every slash. For instance, "</span>" should be written as "<\/span>" to get rid of the error messages.

I tested it in multiple browsers, but I don't have IE8. It won't run on my poor old Pentium II, Windows 98 machine!

[TheKiller]

Hi, Jal

Thanks, ill do that,even if the error's are removed,as its inside a .js file now :)
a friend that runs,IE6 Has tested the code, and it dosnt work on her...

YOU ARE KIDDING,RIGHT ! O.O
You really got a P II ?! :O

[TheKiller]

I Just tested it into -Google Chrome 11.0.696.68-
And it dosnt work. i think it just works in Netscape based browsers,like Firefox

[jecasc]

I think it is a great idea what you are doing. You could even make a little money with this. Since 99.99999% of screens are set to the maxiumum resolution already there is a very small probability that any visitor can simply adjust his monitor settings to get the required resolution.

Which means: To view your website in its full glory they will have to buy a new monitor! Think about the advertising opportunities. I'd replace the banner you are currently displaying with an ad for new screens.

Something like: If you can see only half of this banner - click here to purchase a new screen!

No honestly. I think this is not a very good idea what you are doing. I think the last time I saw a "best viewed in x X x resulotion" message must have been in 1999.

This will make your website look unprofessional. The only worse thing you could do is add some "under construction gifs" and "IE 6 recommended".

[Fotiman]

I have to agree that this is not good usability.

This seems an especially bad idea give that 1024x768 is still the most popular screen size world wide (by a large margin):
[gs.statcounter.com...]

In addition, as has already been pointed out, you will be presenting a negative impression to your users, who likely can't increase their resolution or simply don't want to. And honestly, what user is going to switch their monitor resolution because of one site? Telling them that the site will look better at a higher resolution will only point out them the flaws of your design, and will likely result in negative impressions against your site for it's inflexible design.

In addition, designing a site layout around a single ad space seems a bit silly.

[jalarie]

jalarie: I only tested it in Opera, IE6, FireFox, Mozilla, Netscape4, Netscape7, Ace Explorer, and SlimBrowser. Sorry, I don't have IE8.

I visited your site before my last comment about adding back-slashes, and it worked perfectly in Opera 10.10. I checked the code in all of the browsers mentioned above before giving it to you. Hmmm.

[rocknbil]

<applauds jalarie> . . . having an old machine around for backward compatibility takes futzpah (mostly in convincing the S.O. that it is worth it's desk space.) I drag out the old ThinkPad with '98 for sure testing. For years the G3 with . . . .drum roll . . . IE5 for Mac . . . was my acid test. I finally lost the battle on that one. :-)

Killer is probably LHAO ATM . . . but see, it's about caring for your users. All of them. <shrug>

[lucy24]

For years the G3 with . . . .drum roll . . . IE5 for Mac . . . was my acid test.

If a page will display correctly on both MSIE5 and a normal browser, you know you have got a truly interoperable page and you can sit back and relax.