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