In JavaScript, I can get the screen's height with window.screen.height. Now, if I have dual monitors, and the two monitors are different sizes, and I move the browser window from one monitor to the other, is there any way to detect that, beyond polling the window size at intervals in time?

In JavaScript, I can get the screen's height with window.screen.height. Now, if I have dual monitors, and the two monitors are different sizes, and I move the browser window from one monitor to the other, is there any way to detect that, beyond polling the window size at intervals in time?

• javascript
• multiple-monitors

Share Improve this question Follow asked Apr 4, 2014 at 7:11 user3223943user3223943 3

• Is there any javascript functionality that you wish to achieve or is it just in terms of presentation? If you have no business logic and only presentation you could look into css viewports: developer.mozilla/en/docs/Mozilla/Mobile/Viewport_meta_tag – Vasil Dininski Commented Apr 4, 2014 at 7:13
• Sorry, I have corrected the question, I meant "screen height". – user3223943 Commented Apr 4, 2014 at 7:13
• You can try to make use of media queries, specifically device-height and device-width rules. You can attach event listeners to be notified when those values changes. Maybe it can help you. Read here. – dfsq Commented Apr 4, 2014 at 7:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

There's no reliable way to do this, screen.height will always return the height of the primary monitor, doesn't matter how many monitors you have, so that's not going to help at all.

Using screenX/Y doesn't really help either, as there are no indications of when one screen ends and another begins, and trying to calculate it would be hard as there's no guarantee the user starts out with the browser at the top left in one of the screens, or that the browser takes up the entire screen, and you can't get the dimensions for any other monitor than the primary screen, so there's no way to know the size of the other screens.

In other words, it's going to be hard to do this, if not impossible, and any solution will probably not be very reliable or portable, so you're better of just sticking with the browser window and detecting changes to that, which is easy and generally all you need.

Yes there is a way, as long as the monitor the user is switching over to has different dimensions.

I use Angular, so this is how I do it.

Important notes before the code:

1. window.innerWidth and window.innerHeight is the size of your app's space within the browser. Whereas window.screen.width and window.screen.height is the size of the device (such as your monitor or laptop screen) that the browser running your app is on. So, if you listen to changes to window.screen.height and window.screen.width, you can detect when a user has dragged the browser to another monitor, as long as that monitor has either a different height and or width.
2. You can use either screen.width and screen.height or window.screen.width and window.screen.height, either will get you the same. We'll use screen instead of window.screen since it is shorter.
3. The window:resize event at least in Angular gets triggered not just when a user expands or contracts the browser window, but also when a change in a monitor's or device's screen dimensions occurs.

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.ponent.html',
  styleUrls: ['./home.ponent.scss']
})
export class HomeComponent implements OnInit {
  
  screenHeight: number
  screenWidth: number

  constructor() { 
    this.screenHeight = screen.height
    this.screenWidth = screen.width
  }

  ngOnInit(): void { }
  
  @HostListener('window:resize', ['$event'])
  onResize() {
    // if user has switched from one monitor size to another, then screen.height and screen.width will have changed
    if(this.screenHeight != screen.height || this.screenWidth != screen.width) {
      console.log("Congratulations, this must be a different monitor/device")
      this.screenWidth = screen.width 
      this.screenHeight = screen.height
    }
  }
}