Detect screen width for multiple monitors

Question

My site is optimized (with a fixed width) for a 1024x768 layout. I plan to add vertical banners on both sides of the page for people with a resolution of 1280 or higher.

Using screen.width, I can easily do this. But I encounter a problem when trying to use it on computers with multiple monitors.

Assume the following scenario:
Monitor 1 (main display) - Resolution 1024 x 768
Monitor 2 (secondary display) - Resolution 1440 x 900

screen.width always shows the width as 1024, regardless of the monitor. I am browsing the page. When changing the main monitor to monitor 2, the values ​​change to the opposite.

This is a big problem, especially for people with a resolution of 1024x768 as their primary resolution. This means that I can potentially lose the impression of a banner in such scenarios.

I would really appreciate any help on this.

Answer 1

Thanks for your duskwuff answer. Helped me compile the following 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

• jQuery 1.4+ required
• Please note that the above function was tested only for browsers IE7 +, FF7 + and Chrome16 +.

Answer 2

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

Answer 3

For Javascript, you can use it this way in code:

 var width = new Array(); var height = new Array(); var screens = java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment().getScreenDevices(); for(var i = 0;i<screens.length; i++){ var config = screens[i].getConfigurations(); var bounds = config[0].getBounds(); width[i] = bounds.getWidth(); height[i] = bounds.getHeight(); } 

Now you can use width[0] , width[1] and so on for Height to get the details.

If you want to get the monitor settings that the mouse cursor points to:

 var screen, config,width, height; screen = java.awt.MouseInfo.getPointerInfo().getDevice(); config = screen.getConfigurations(); width = config[0].getBounds().getWidth(); height = config[0].getBounds().getHeight();