Detect screen width for multiple monitors
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
Try looking at window.innerWidth (the width of the web page on screen) instead of window.screen.width.