CODEWITHSUNDEEP
javascriptmultiple-monitors
user3223943
user3223943

Reputation:

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

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?

Upvotes: 15

Views: 2611

Answers (2)

Adam
Adam

Reputation: 2398

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
    }
  }
}

Upvotes: 0

adeneo
adeneo

Reputation: 318232

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.

Upvotes: 3

Related Questions