[SOLVED] Get Monitor Count

Get Monitor Count

I have a web application that I'd like to implement the following behavior.

When you click on a specific link:

If the user has more than one monitor - open the url in a window with a given name.
Otherwise - change the iframe's src attribute to that of the url.

How do I detect the monitor count in JavaScript?

If it's impossible, a Chrome only solution would also work since this is for an intranet app.

Solution

Greetings from the future!

As of 2025, this solution works for Google Chrome and Microsoft Edge.

We can use window:isExtended to find out if there are multiple monitors:

window.screen.isExtended;

Then we can use Window:getScreenDetails:

window.getScreenDetails();

This will tell you the number of screens, their display details (of which there are many) and their 'left' coordinates. This requires the user to grant permission, though.

With this, you can open a window on a specific screen. For example:

// If you run this on your left screen (0),
// the window will open on your right screen

async function openWindow(){
// Get screen info
const details = await getScreenDetails();
const secondScreen = details.screens[1];
const {left} = secondScreen;

// Open window
const winProps = `left=${left},top=100,width=640,height=480`;
const win = window.open(
  "https://www.google.com/",
  "My second screen window",
  winProps
);
}

openWindow();