Any Code for Determining Screen Resolution?

Topic

New Reply

As we all know, our pages may appear different based on a user’s screen resolution. I definitely use percentages for sizing text and layout. We are converting our intranet webpages to using a graphic across the top that does NOT resize well on screen resolutions greater than 800×600. If the person’s brower is set higher than this, we want to add content to the right of the graphic. (Yes, I know – just because a person’s resolution is set higher than 800×600 doesn’t mean that they have the brower window maximized.)

I did a search of Woody’s on this topic and didn’t find a solution (other than sizing with percentages). Does anyone have some code for determining the screen resolution? I’m hoping this could be done in a manner similar to determining which browser is being used.

Thanks in advance for any help you can provide.

Reply | Quote

Replies

Hi Loretta,

You’ve asked the $1Million question! I’ve never come across a usable method for determining a browser’s screen resolution. My company could also benefit from this type of information about our website users. Unfortunately, the policy-makers have nice, large screens with 1024×768 or better. Therefore, they have insisted that we build all of our sites to match that resolution. Anyone with less is just out of luck (a.k.a. they’ll get un-necessary scrollbars).

If anyone else has ideas please share!! In the meantime, I’ll do a bit more looking since I had previously given up on finding an adequate solution.

Reply | Quote

Mark, I was hoping you had found a solution since your post on this topic back in 2002! Maybe someone else has.

Reply | Quote

Ah HA!!

I found something… (Guess I was too quick with my last post). This appears to be supported by nearly every 4+ browser. I looked in a JavaScript book (published in 1998) after discovering this feature and found the screen object there. How could I have overlooked something this important?!

Check out BrowserSpy (look for ScreenInformation)

The JavaScript is quite simple:

screen.height = Max height
screen.width = Max width
screen.availHeight = available height (minus taskbar)
screen.availWidth = available width (minus side-bars, I guess)
screen.deviceXDPI = horizontal DPI
screen.deviceYDPI = vertical DPI
screen.colorDepth = Color depth (bits)

Amazing – I never knew this existed!!! Thanks for reminding me to search.

Reply | Quote

Ironically, this is well standardized, but the similar-sounding properties for window objects differ between IE and NS 4. Can’t we all just get along?

Reply | Quote

Ironically, this is well standardized, but the similar-sounding properties for window objects differ between IE and NS 4. Can’t we all just get along?

Reply | Quote

Ah HA!!

I found something… (Guess I was too quick with my last post). This appears to be supported by nearly every 4+ browser. I looked in a JavaScript book (published in 1998) after discovering this feature and found the screen object there. How could I have overlooked something this important?!

Check out BrowserSpy (look for ScreenInformation)

The JavaScript is quite simple:

screen.height = Max height
screen.width = Max width
screen.availHeight = available height (minus taskbar)
screen.availWidth = available width (minus side-bars, I guess)
screen.deviceXDPI = horizontal DPI
screen.deviceYDPI = vertical DPI
screen.colorDepth = Color depth (bits)

Amazing – I never knew this existed!!! Thanks for reminding me to search.

Reply | Quote

Mark, I was hoping you had found a solution since your post on this topic back in 2002! Maybe someone else has.

Reply | Quote

My only “solution” to this was to place my leading graphic in a table (sized to 100%) and place an empty cell beside it. The empty cell has a background colour that harmonized with the graphic. Hopefully it appears that the graphic spreads out at higher resolutions.

My other solution is a foam bat – for the people who request these things .

Reply | Quote

We are already considering using the empty cell with a complementary background color. The challenge is to find a color that blends nicely but doesn’t draw attention away from the graphic!

As far as the foam bat goes, it would need to be used on me too! I was part of the group that decided to use the graphic!

Reply | Quote

We are already considering using the empty cell with a complementary background color. The challenge is to find a color that blends nicely but doesn’t draw attention away from the graphic!

As far as the foam bat goes, it would need to be used on me too! I was part of the group that decided to use the graphic!

Reply | Quote