Can I detect movement of a browser window from one screen to another in JavaScript?

Question

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?

Twinkling

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.org/en/docs/Mozilla/Mobile/Viewport_meta_tag – Iridectomy

Sorry, I have corrected the question, I meant "screen height". – Twinkling

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. – Ardeth

Answer 1

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.

Deficiency

Why cant you use screen.availWidth? Doesn't it give you the combined width of both screens? Couldn't you subtract the width of the main screen to determine the width of the second screen? You could then make an educated guess at the second screens height just by knowing standard screen resolution sizes. – Macdermot

@GaryHayes - I have four screens, and screen.availWidth only gives me 1920, which is the width of the primary screen, as noted in my answer, screen doesn't give you dimensions for anything other than the primary screen. – Deficiency

Okay. I only have one screen. Is there a way to change focus to other screen with javascript and get availWidth from it? – Macdermot

Not sure if that was the case when this was written, but if so, then things have changed. In Angular, screen.width gives the monitor width of the current monitor the browser window is in, regardless if it is the primary monitor or not. See my answer for details. – Sigismondo

Answer 2

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.component.html',
  styleUrls: ['./home.component.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
    }
  }
}

Sigismondo