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