Getting the Window Position on Web

Today I learned that you can get the browser window's position within your screen using JavaScript. Check this out! (on desktop/laptop)

Loading... (JavaScript required)

I found this from Shutterbug, which is a game that uses this mechanism as its controls. It's part of GMTK Game Jam 2024.

I did this using various properties of window and window.screen (some of them are nonstandard). However, I noticed some issues with these properties on some browsers:

  • Firefox on Mac temporarily returns some strange screen widths and heights while being dragged to a monitor with a different pixel density (not sure if I could compensate for that somehow, other browsers don't have this behavior).
  • Safari on Mac doesn't update the Screen.availHeight of a screen if the dock moves to another screen (Chrome and Firefox handled this).
  • Tor Browser completely blocks window.screenTop and screenLeft, sets the screen size equal to window size, and limits the granularity of the sizes (I assume it's for fingerprinting resistance, not an issue).
  • Chrome on Android seems to just return 0 as the window.screenTop. (Firefox actually implements this).
Amazingly, Firefox on Android implements the position properties while using Android's pop-up window feature.

You can check out the source code here.