Display webpage contains multiple divs on a dual monitor (each div on a single monitor)

I have a webpage w开发者_C百科hich contains multiple divs using css-grid (divA and divB) for example. Also I have 2 monitors (physical screens).

I want to display divA into first monitor and divB into second monitor.

I am looking answers for the following questions:

1. How can I position divA in the first monitor and divB on the second monitor (responsively)?
2. Any simulator available to manipulate dual screens on a single monitor to test this scenario please?

Any help or suggestion greatly appreciated.

Thanks, Ashwin

1. Detect screen resolution in Javascript.

2. Modify your screen resolution to be half-height and full width.

3. Maximize the browser window.

Having your browser opened across both monitors as one page, you can do it using the Brett Parsons answer or doing the old-style of using 50% of viewport for the width like so:

CSS:

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

But as Brett pointed out, majority of users online won't have their pages opened across two monitors, that is if majority of them are in fact using dual monitors at all.

No offense, but it's like you're trying to break the fourth wall here.

I might be mistaken, but only the OS aware of the existence of the dual monitors. So, when you expand the browser across those monitors, the browser has no awareness of the monitors it occupied, only that its window.screen.width is larger than normal.

So, technically, since our HTML elements run inside a browser, we shouldn't be able to exactly detected which area of the screen are on each of the monitors.

On the other hand, how about we make use of two different browser window instead? E.g. use javascript to open a new window with

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

Then on the second window, which you could drag it on another screen, display another <div> so that each window occupied each of the screen, thus having 2 <div> on each screen.

Then, in order to coordinate the interaction/animation between the two windows. Do it either through the secondWindow or window.opener object.

 // 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();

Note: The above example will only work if both of pages host under the same domain. Else, you'll need to rely on postMessage API to coordinate between the two windows.

There's nothing you can do regarding multiple monitors unless I'm completely misunderstanding your intent. The user would have to have a browser spread out across both monitors which is very unlikely. What you can do though is this with 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>

I'm sure you know how to do this though. This is assuming the monitors are the same size. I'm trying to understand what you're trying to achieve here.