Определить ширину экрана для нескольких мониторов

Question

Мой сайт оптимизирован (с фиксированной шириной) для макета 1024x768. Я планирую добавить вертикальные баннеры по обе стороны страницы для людей с разрешением шириной 1280 или выше.

Используя screen.width, я могу легко это сделать. Но я сталкиваюсь с проблемой при попытке использовать ее на компьютерах с несколькими мониторами.

Давайте предположим, указанной ниже сценарий:
монитор 1 (основной дисплей) - Разрешение 1024 х 768
Монитор 2 (дополнительный дисплей) - Разрешение 1440 х 900

Screen.Width всегда показывает ширина 1024, независимо от монитора. Я просматриваю страницу. Значения меняются на противоположные, если я меняю основной монитор на монитор 2.

Это большая проблема, особенно для людей с разрешением 1024x768 в качестве основного разрешения. Это означает, что я могу потенциально потерять впечатления баннера в таких сценариях.

Я бы очень признателен за любую помощь по этому вопросу.

Answer 1

Спасибо за ваш ответ duskwuff. Помог мне скомпилировать нижеследующую функцию, которая решила проблему для меня.

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; 
} 

Важные замечания

1. JQuery 1.4+ требуется
2. Обратите внимание, что данная функция была протестирована только для IE7 +, FF7 + & Chrome16 + браузеры.

Answer 2

Попробуйте найти window.innerWidth (ширина страницы на экране) вместо window.screen.width.

Answer 3

Для Javascript вы можете использовать его таким образом в коде:

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(); 
} 

Теперь вы можете использовать width[0], width[1] и как так для Height, чтобы получить подробную информацию.

Если вы хотите, чтобы получить конфигурацию монитора, в котором находится курсор мыши в данный момент указывает:

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