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

Question

I have a webpage which 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:

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

Any help or suggestion greatly appreciated.

Thanks, Ashwin

You may receive more detailed answers if you ask one question per post. — George Cummins, Sep 19 '11 at 12:15
@Ashwin I have added a bounty on your question, Could U accept the edits please — Anyname Donotcare, Nov 01 '19 at 18:27
Honestly, but it's quite stupid since front-end developers wrap content in 1240px max-width containers, no offense. By the way, +75% website traffic is by mobile viewports, so... — M4FI4S, Nov 08 '19 at 10:07

score 7 · Answer 1 · edited May 23 '17 at 10:34

7

Detect screen resolution in Javascript.
Modify your screen resolution to be half-height and full width.
Maximize the browser window.

edited May 23 '17 at 10:34

Community

1
1

answered Sep 19 '11 at 12:14

George Cummins

28,485
8
71
90

This is an extreme overkill version of my answer. In your example, what happens if the two monitors are different resolutions? You'll be in the same boat that you're in with my answer. – Brett Parsons Nov 12 '19 at 15:21

score 1 · Answer 2 · answered Nov 08 '19 at 04:05

1

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.

answered Nov 08 '19 at 04:05

I'm genuinely curious about this question though. On Mac I can't even get my browser to spread across two monitors. I haven't ever tried on my PC though. – Brett Parsons Nov 12 '19 at 15:19
@Brett Parsons When spreading across two monitors It's often being in windowed mode and stretching the window horizontally to the end of the other monitor's side :) – Nov 12 '19 at 15:27

Montri M · Answer 3 · 2019-11-08T06:11:43.367

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.

score 0 · Answer 4 · answered Nov 05 '19 at 23:41

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.

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

4 Answers4