Detect screen width for multiple monitors

javascript screen-resolution
Pratik Thakkar picture Pratik Thakkar · Feb 23, 2012 · Viewed 15.8k times · Source

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

duskwuff -inactive- picture duskwuff -inactive- · Feb 23, 2012

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

Related questions

How to detect the screen resolution with JavaScript?

Is there a way that works for all browsers?

Read More
screen.width and screen.availwidth difference in javascript

What is the difference between screen.width and screen.availwidth in JavaScript? On my system both are the same!

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More