Detecting screen size in IE...

[cusimar9]

I'm creating a website at the moment and it all looks very nice in 1024x768, problem is if they use 800x600 the pictures are too big and the site doesn't look right at all.

Is there any way I can detect the resolution and load smaller pictures/resize the pictures if they're using 800x600?

Thanks

[CompGeek01]

When I first tried my hand at creating web pages a number of years ago I asked a similar question.....


What I've personally found is that you should design your site around the fact that some users are going to have users that are running 800x600 and I haven't really found a real reason to make your site more than 800 pixels wide....I understand that doesn't answer your question...the answer to your question would be to find a javascript script that detects the size:


<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>


IMO it's bad design, but thats me. :t

[DocEvi1]

CompGeek is right there, you should make your site for the lowest common denominator, it used to be 640*480, but 800*600 is a very safe bet now-a-days (make sure you leave enough space for scrollbars so go for 780 width max).

The other option if you have a dynamic site is to make several views for the same info to make sure you take into account all the different browsers/window sizes...

IMO, simply go to the lowest/slowest computer and make a website which is suitable for them, too many sites now-a-days think everyone is on broadband so load up the pages with horrible and uncessary flash pages which just slow the whole thing down. I have 512adsl at home and some pages take an age to load... the only pages that are acceptable in that arena are ones I want to see such as movies, or pictures, not products I want to find some information about!

[cusimar9]

I understand what you're saying, and I've tried to design the site partly with that in mind.

But my problem is specifically with the pictures. They're not very big at the moment (ie 300x250 pixels) but obviously in 800x600 they're huge.

But... if I just make them smaller then it won't look right for 1024x768 users.

That's why I was looking for some test to say:

if its 1024x768 then <img bigpicture.jpg> if its 800x600 then <img smallpicture.jpg>

[jjinno]

One thing you could try is to set the width property inside your IMG tag to be a percentage (% of available room).

If you have your pictures constrained to a table, then the table will change size when the window changes size, and thus also will your pictures change proportionately.

This really isnt the best way to go about this, but it is a way, and it does work.

[cusimar9]

I tried that, but I think the width tag is related to the original image size, not the size of the table/window.

ie I put in Width="30%" but it just made the picture 1/3 the size not 1/3 of the window size.

[CompGeek01]

Have you tried implementing the code I provided?

[cusimar9]

Not yet mate, I'm at work at the moment )-| )-| )-| I'll try it as soon as I get home

So looking at that I would have an index page who's only contents are the script you wrote, which then loads an index_big.html and an index_small.html depending on the screen size?

[CompGeek01]

You could either create seperate pages (like the example) or have a script that would set each image on the page to small or big...I'm not sure how you would do the latter..because I'm not very proficient in javascript. :t

I'm sure someone else could help you if you needed the other. Good luck! :t :t

[cusimar9]

Thanks, that script worked a treat!

I've now got to resize all the images though, bugger

I'm glad its not that big a site, only about 10 pages

[cusimar9]

It actually didn't take me very long at all, I'm very impressed it works so easily!

I've got 2 index files, index.html (hires) and index_lowres.html. At the top of each there's a script that says "if this isn't the right file for the resolution, load the other one.

Works very well! Check it out:

http://www.santoshighamfarm.co.uk

I'm happy to hear comments, its not yet finished :D

[fishybawb]

None of the links work (although I guess that coule be 'cos it's not finished ;) ) and there's a missig image to the top right. Its properties give the name as:

PHOTOS%5CFire1.jpg

[cusimar9]

Oh s**t, why doesn't it work in mozilla?? :confused:

Works fine in IE...

:mad:

[fishybawb]

From the source it looks like you've missed the closing </a> tags off your links.

[cusimar9]

Aha! Cheers I shall investigate :D

[macampbell]

compgeek

Please explain - -with the code you provide, does it work as is, or would it need two index pages? I am a bit baffled:(

[cusimar9]

compgeek's script would go in the index page, then you'd have 2 'homepages' one lowres and one highres

I've got it so that there is a main index page, and if it detects 800x600 it loads an index_lowres.html

[macampbell]

what do you name each index page? not index.html?

[CompGeek01]

Pretty much what the script does is redirects the browser to the new page based on their screen resolution.

The best thing if you were going to use this would be to have this script in your index.html page and create two pages (highres.html and lowres.html) and certain views would view the correct page..

There is only one "indeax" page, the user is simply redirected.

[macampbell]

Thanks
I've done it. Its working fine:t