在双显示器上显示网页

Question

我有一个包含2个div（divA和divB）的网页。我还有2个显示器（屏幕）。

我想将divA显示在第一个监视器中，divB显示在第二个监视器中。 divA和divB都应该在同一个浏览器窗口中。

我正在寻找以下问题的答案： 1.任何可用于在单个监视器上操作双屏幕的模拟器。 2.如何在第二台显示器上放置div B？

非常感谢任何帮助或建议。

谢谢， 阿斯温

Answer 1

1. Detect screen resolution in Javascript

2. 将屏幕分辨率修改为半高和全宽。

3. Maximize the browser window

Answer 2

在两台显示器上都将浏览器打开为一页时，您可以使用 Brett Parsons 回答，也可以采用旧的方式，即使用50％的视口作为宽度：

CSS：

divA, divB {
  width:50vw; /* Both div's will take 50% of the full page width */
}

但是正如Brett所指出的那样，大多数在线用户不会在两台显示器上打开他们的页面，也就是说，如果实际上他们中的大多数都根本在使用双显示器。

Answer 3

没有冒犯，但就像您要在这里打破第四堵墙一样。

我可能会误会，但只有操作系统知道双监视器的存在。因此，当您在这些监视器上扩展浏览器时，浏览器不会意识到它所占用的监视器，而只是知道其window.screen.width大于常规监视器。

因此，从技术上讲，由于我们的HTML元素在浏览器中运行，因此我们不应该能够准确地检测每个监视器上的屏幕区域。

另一方面，我们如何使用两个不同的浏览器窗口呢？例如。使用javascript使用

打开一个新窗口

var secondWindow = window.open("<url of another page>");

然后在第二个窗口（您可以将其拖动到另一个屏幕上）上显示另一个<div>，以便每个窗口占据每个屏幕，因此每个屏幕上有2个<div>。

然后，为了协调两个窗口之间的交互/动画。通过secondWindow或window.opener对象进行操作。

 // on the first window, you can call javascript function on second window 
 secondWindow.doSomething();

 // on the second window, you can call javascript function on the first window
 window.opener.doSomething();

注意：以上示例仅在两个页面都位于同一域下时才有效。否则，您将需要依靠postMessage API来在两个窗口之间进行协调。

Answer 4

除非我完全误解了您的意图，否则您无法对多台显示器进行任何操作。用户将不得不在两个监视器之间分布一个浏览器，这是非常不可能的。不过，您可以使用CSS Grid做到这一点。

.wrapper {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  }

<div class="wrapper">
  <div class="div-a">
  </div>
  <div class="div-b">
  </div>
</div>

我确定您知道该怎么做。这是假设监视器大小相同。我想了解您在这里想要达到的目标。