10

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

我想显示divA到第一台显示器和divB第二台显示器。

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

  1. 如何定位divA在第一台显示器和divB第二台显示器上（响应式）？
  2. 请问有什么模拟器可以在单个显示器上操作双屏来测试这个场景吗？

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

谢谢，阿什温

4

4 回答 4

7

  1. 在 Javascript 中检测屏幕分辨率。

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

  3. 最大化浏览器窗口。

于 2011-09-19T12:14:34.387 回答
1

无意冒犯，但这就像你试图打破这里的第四面墙。

我可能弄错了，但只有操作系统知道双显示器的存在。因此，当您在这些监视器上扩展浏览器时，浏览器不会意识到它占用的监视器，只是它window.screen.width比正常情况大。

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

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

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

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

然后，为了协调两个窗口之间的交互/动画。通过secondWindoworwindow.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();

注意：上述示例仅适用于两个页面托管在同一域下的情况。否则，您将需要依靠postMessageAPI 在两个窗口之间进行协调。

于 2019-11-08T06:05:40.687 回答
1

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

CSS：

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

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

于 2019-11-08T04:05:59.063 回答
0

除非我完全误解了您的意图，否则您对多台显示器无能为力。用户必须将浏览器分散在两个监视器上，这是不太可能的。你可以做的是使用 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>

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

于 2019-11-05T23:41:32.663 回答