Detect screen width for multiple monitors

Question

My website is optimized (with fixed width) for 1024x768 layout. I plan to add vertical banners on either side of the page for people having resolution width 1280 or higher.

Using screen.width, I can easily do this. But I face a problem when trying it on machines with multiple monitors.

Lets assume the below mentioned scenario:
Monitor 1 (primary display) - Resolution is 1024 x 768
Monitor 2 (secondary display) - Resolution is 1440 x 900

screen.width always shows width as 1024 irrespective of the monitor I browse the page on. The values are reversed if I change the primary monitor to Monitor 2.

This is a big problem especially for people having 1024x768 resolution as primary resolution. This means that I could potentially loose banner impressions in such scenarios.

I would really appreciate any help on this.

Answer 1

Try looking at window.innerWidth (the width of the web page on screen) instead of window.screen.width.

Answer 2

Thanks for your response duskwuff. Helped me compile the below function which solved the problem for me.

function getBrowserWith()
{
    if(($.browser.msie == true && $.browser.version == '9.0') || $.browser.webkit == true || $.browser.mozilla == true)
        return window.innerWidth;
    else if(($.browser.msie == true) && ($.browser.version == '7.0' || $.browser.version == '8.0'))
        return document.documentElement.clientWidth;
    else
        return screen.width;
}

Important notes

1. jQuery 1.4+ is required
2. Note that the above function has been tested only for IE7+, FF7+ & Chrome16+ browsers.