显示网页在双显示器上包含多个 div（每个 div 在单个显示器上）答案

【问题标题】：Display webpage contains multiple divs on a dual monitor (each div on a single monitor)显示网页在双显示器上包含多个 div（每个 div 在单个显示器上）
【发布时间】：2011-09-19 12:09:48
【问题描述】：

我有一个网页，其中包含多个 div，例如使用 css-grid（divA 和 divB）。我还有 2 个显示器（物理屏幕）。

我想在第一台显示器上显示divA，在第二台显示器上显示divB。

我正在寻找以下问题的答案：

如何将divA 定位在第一台显示器上，将divB 定位在第一台显示器上第二台显示器（响应式）？
请提供任何可用于在单个显示器上操作双屏以测试此场景的模拟器？

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

谢谢，阿什温

【问题讨论】：

如果您在每个帖子中提出一个问题，您可能会收到更详细的答案。
好的，谢谢你的建议
@Ashwin 我已经为您的问题添加了赏金，请您接受编辑
@AnynameDonotcare - 批准
这些仍然不是问题的答案。

标签： javascript html css css-grid monitor

【解决方案1】：

Detect screen resolution in Javascript.
将屏幕分辨率修改为半高和全宽。
Maximize the browser window.

【讨论】：

这是我的回答的一个极端矫枉过正的版本。在您的示例中，如果两台显示器的分辨率不同，会发生什么情况？你会和我的答案在同一条船上。

【解决方案2】：

让您的浏览器在两个显示器上作为一页打开，您可以使用 Brett Parsons 答案或使用旧式的 50% 的视口宽度，如下所示：

CSS：

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

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

【讨论】：

我真的很好奇这个问题。在 Mac 上，我什至无法让我的浏览器分布在两台显示器上。不过我从来没有在我的电脑上试过。
@Brett Parsons 在两台显示器上展开时通常处于窗口模式并将窗口水平拉伸到另一台显示器的末端:)

【解决方案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 来协调两个窗口。

【讨论】：

【解决方案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>

我相信你知道如何做到这一点。这是假设监视器的大小相同。我试图了解您在这里想要实现的目标。

【讨论】：