使用 javascript 测试多个屏幕

IT技术 javascript html cross-browser
2021-03-15 07:21:48

是否可以判断网站用户是否使用多个显示器?我需要找到弹出窗口的位置,但用户很可能会有多个显示器设置。虽然window.screenXetc. 会给出浏览器窗口的位置,但它对多个显示器没有用。

6个回答

我不相信现在是可能的;然而,除了 Web 开发之外,js 在桌面小部件中的使用变得越来越流行,这将是请求未来版本的一个很好的功能

我想知道 Gears 之类的项目是否可以实施?
2021-05-07 07:21:48

这是一个过于复杂的解决方案。我强烈建议重构这个——它没有在生产站点上使用,只是作为对我自己的快速“概念证明”。

对,警告结束。

我首先假设用户可能没有双显示器设置,但他们可能有一个非常大的显示器,因此无论如何都可以应用相同的功能。

var newWindow,
    screenSpaceLeft = window.screenX,
    screenSpaceTop = window.screenY,
    screenSpaceRight = screen.availWidth - (window.screenX + window.outerWidth),
    screenSpaceBottom = screen.availHeight - (window.screenY + window.outerHeight),
    minScreenSpaceSide = 800,
    minScreenSpaceTop = 600,
    screenMargin = 8,

    width = (screen.availWidth / 2.05),
    height = screen.availHeight,
    posX = (screen.availWidth / 2),
    posY = 0;

e.preventDefault();

if (screenSpaceRight > screenSpaceLeft && screenSpaceRight > screenSpaceTop && screenSpaceRight > screenSpaceBottom && screenSpaceRight > minScreenSpaceSide) {
    if (width > screenSpaceRight) {
        width = screenSpaceRight - screenMargin;
    }
    if (posX < (screen.availWidth - screenSpaceRight)) {
        posX = window.screenX + window.outerWidth + screenMargin;
    }
} else if (screenSpaceLeft > screenSpaceRight && screenSpaceLeft > screenSpaceTop && screenSpaceLeft > screenSpaceBottom && screenSpaceLeft > minScreenSpaceSide) {
    if (width > screenSpaceLeft) {
        width = screenSpaceLeft - screenMargin;
    }

    posX = 0;
} else if (screenSpaceTop > screenSpaceRight && screenSpaceTop > screenSpaceLeft && screenSpaceTop > screenSpaceBottom && screenSpaceTop > minScreenSpaceTop) {
    posX = 0;
    posY = 0;
    width = screen.availWidth;
    height = (screen.availHeight / 2.05);
    if (height > screenSpaceTop) {
        height = screenSpaceTop - screenMargin;
    }
} else if (screenSpaceBottom > screenSpaceRight && screenSpaceBottom > screenSpaceLeft && screenSpaceBottom > screenSpaceTop && screenSpaceBottom > minScreenSpaceTop) {
    posX = 0;
    width = screen.availWidth;
    if (window.screenY + window.outerHeight + screenMargin > (screen.availHeight / 2)) {
        posY = window.screenY + window.outerHeight + screenMargin;
    } else {
        posY = (screen.availHeight / 2);
    }
    height = (screen.availHeight / 2.05);
    if (height > screenSpaceBottom) {
        height = screenSpaceBottom - screenMargin;
    }
}

newWindow = window.open(this.href, "_blank", "width=" + width + ",height=" + height + ",location=yes,menubar=no,resizable=yes,scrollbars=yes,status=yes,menubar=yes,top=" + posY + ",left=" + posX);

它检查有多少可用的屏幕空间,如果可用的最小数量 (800 x 600),它会在那里打开窗口。如果没有足够的空间,它会覆盖屏幕右侧的窗口,只占它的一半左右。

笔记:

首先,应该改变它以找出最大空间量的位置,而不是随意搜索左、右、上、下。

其次,我怀疑在一些使用了 screen.availHeight 的地方,应该使用 screen.height 来代替。宽度也一样。这是因为在决定用户是否有第二台显示器(或屏幕上有很多空间)时,我们对任务栏的位置并不太感兴趣。

第三,它在 IE < 8 中不起作用。这可以通过在适当的情况下使用 screenLeft 和 screenTop 而不是 screenX/screenY 来轻松纠正。

第四,代码很乱,可以做得比它看起来更优雅。我不为此道歉。然而,你不应该在任何地方使用这种糟糕的、不可维护的 JS,它需要被重写。我把它放在这里只是因为它目前在我的思路中,当我正确编写它时,我很可能会忘记在这里发布一个好的解决方案,因为它不会发生几个月。

对。你去吧。我不承担使您的 javascript 变得可怕、丑陋和完全难以做任何事情的责任。:)

我发现这是有人使用过的解决方案......我不明白你为什么不相信它。

[如果宽度大于 (Height/3) * 4 > (Screen.Width) THEN]

[用户有双显示器]

[万一]

呃...我把屏幕叠起来。高度 > 宽度。两个屏幕都没有相同的宽度,所以如果你拥抱最大宽度,你最终会离开屏幕超过一定的高度。更不用说上两下配置了。
2021-05-08 07:21:48
你可以有一个高分辨率的主要 mon,和一个低分辨率的次要 mon。这种解决办法不好。
2021-05-13 07:21:48
有些机器(我自己的)被设置为两个独立的桌面,所以高度和宽度只返回浏览器所在的屏幕。
2021-05-15 07:21:48
此外,许多显示器具有比 4:3 更宽的纵横比
2021-05-17 07:21:48

你不能那样做。但是,您可以将弹出窗口置于父窗口的中心。我认为在您的网站中间显示一个“div”作为对话框是一个更好的主意,因为它被弹出窗口阻止的可能性较小,而且 IMO 不那么烦人。

屏幕的大小呢?多个屏幕通常有很大的尺寸。只需检查尺寸并决定只在一个或多个屏幕上显示是否合理。