Question

120

Detect screen width for multiple monitors

rated 0 times [ 124] [ 4] / answers: 1 / hits: 18325 / 13 Years ago, thu, february 23, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aubreeg

Add To Favorites

Follow

Total Points: 437

Total Questions: 102

Total Answers: 102

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

aubreeg questions

1 Update Alpinejs x-data when input has a value on page load or user change

Sun, Feb 14, 21, 00:00, 3 Years ago

1 How can i call a Rest API from a Vue component?

Sun, Dec 20, 20, 00:00, 4 Years ago

1 How do I apply React.memo to all components in an array?

Sat, Aug 22, 20, 00:00, 4 Years ago

1 Pass useState state to router component in React

Fri, May 1, 20, 00:00, 4 Years ago

1 How can I hover over an element then click

Wed, Feb 26, 20, 00:00, 4 Years ago

View All

answered 13 Years ago ryankiah · Accepted Answer

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

jQuery 1.4+ is required

Note that the above function has been tested only for IE7+, FF7+ & Chrome16+ browsers.