检测多台显示器的屏幕宽度 [英] Detect screen width for multiple monitors

问题描述

我的网站针对1024x768布局进行了优化(固定宽度).我计划为分辨率宽度为1280或更高的用户在页面的两边添加垂直横幅.

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.

使用screen.width，我可以轻松地做到这一点.但是在具有多台显示器的机器上尝试时，我遇到了一个问题.

Using screen.width, I can easily do this. But I face a problem when trying it on machines with multiple monitors.

让我们假设以下情况:
显示器1(主显示屏)-分辨率为1024 x 768
监视器2(辅助显示)-分辨率为1440 x 900

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始终将宽度显示为1024，而与我在其上浏览页面的显示器无关.如果将主监视器更改为Monitor 2，则这些值会颠倒.

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.

这是一个大问题，特别是对于以1024x768分辨率为主要分辨率的人而言.这意味着在这种情况下，我可能会失去横幅印象.

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.

推荐答案

感谢您的回应.帮助我编译了以下功能，为我解决了问题.

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

重要提示

1. 需要jQuery 1.4 +
2. 请注意，以上功能仅针对IE7 +，FF7 +和Chrome16 +浏览器进行了测试.

这篇关于检测多台显示器的屏幕宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！