Window management | Frontend Practical Guide

Overview

The window.getScreenDetails() method gets information about the screens on a device, which you can use to place new windows on a specific screen with window.open(). It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`ScreenDetailed` Experimental	100	100
`requestFullscreen (options screen parameter)` Experimental `options.screen` parameter	100	100
`permission_window-management` Experimental `window-management` permission	111	111
`change_event` Experimental The change event of the Screen interface is fired on a specific screen when one or more of the following properties change on it:	100	100			100
`isExtended` Experimental The isExtended read-only property of the Screen interface returns true if the user's device has multiple screens, and false if not.	100	100			100
`availLeft` Experimental The availLeft read-only property of the ScreenDetailed interface is a number representing the x-coordinate (left-hand edge) of the available screen area inside the OS virtual screen arrangement, relative to the multi-screen origin.	100	100
`availTop` Experimental The availTop read-only property of the ScreenDetailed interface is a number representing the y-coordinate (top edge) of the available screen area inside the OS virtual screen arrangement, relative to the multi-screen origin.	100	100
`devicePixelRatio` Experimental The devicePixelRatio read-only property of the ScreenDetailed interface is a number representing the screen's device pixel ratio.	100	100
`isInternal` Experimental The isInternal read-only property of the ScreenDetailed interface is a boolean indicating whether the screen is internal to the device or external. External devices are generally manufactured separately from the device they are attached to and can be connected and disconnected as needed, whereas internal screens are part of the device and not intended to be…	100	100
`isPrimary` Experimental The isPrimary read-only property of the ScreenDetailed interface is a boolean indicating whether the screen is set as the operating system (OS) primary screen or not.	100	100
`label` Experimental The label read-only property of the ScreenDetailed interface is a string providing a descriptive label for the screen, for example "Built-in Retina Display".	100	100
`left` Experimental The left read-only property of the ScreenDetailed interface is a number representing the x-coordinate (left-hand edge) of the total screen area inside the OS virtual screen arrangement, relative to the multi-screen origin.	100	100
`top` Experimental The top read-only property of the ScreenDetailed interface is a number representing the y-coordinate (top edge) of the total screen area inside the OS virtual screen arrangement, relative to the multi-screen origin.	100	100
`ScreenDetails` Experimental The ScreenDetails interface of the Window Management API represents the details of all the screens available to the user's device.	100	100
`currentScreen` Experimental The currentScreen read-only property of the ScreenDetails interface contains a single ScreenDetailed object representing detailed information about the screen that the current browser window is displayed in.	100	100
`currentscreenchange_event` Experimental The currentscreenchange event of the ScreenDetails interface is fired when the ScreenDetails.currentScreen changes in one of the following ways:	100	100
`screens` Experimental The screens read-only property of the ScreenDetails interface contains an array of ScreenDetailed objects, each one representing detailed information about one specific screen available to the user's device.	100	100
`screenschange_event` Experimental The screenschange event of the ScreenDetails interface is fired when the set of screens available to the system has changed: that is, a new screen has become available or an existing screen has become unavailable. This will be reflected in a change in the ScreenDetails.screens array.	100	100
`getScreenDetails` Experimental The getScreenDetails() method of the Window interface returns a Promise that fulfills with a ScreenDetails object instance representing the details of all the screens available to the user's device.	100	100			100
`moveTo (relative-multi-screen)` Moved relative to the Multi-screen origin	100	100	1	1	100	1
`open (relative-multi-screen)` Opened relative to the Multi-screen origin	100	100	1	1	100	1
`screenLeft (relative-multi-screen)` Relative to the Multi-screen origin	100	100	64	1	100	1
`screenTop (relative-multi-screen)` Relative to the Multi-screen origin	100	100	64	1	100	1
`screenX (relative-multi-screen)` Relative to the Multi-screen origin	100	100	1	1	100	1
`screenY (relative-multi-screen)` Relative to the Multi-screen origin	100	100	64	1	100	1
Other
`html.elements.iframe.allow.window-management` Experimental	100	100			100
`http.headers.Permissions-Policy.window-management` Experimental The HTTP Permissions-Policy header window-management directive controls whether or not the current document is allowed to use the Window Management API to manage windows on multiple displays.	100	100			100

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const screenDetails = await window.getScreenDetails();
for (const screen of screenDetails.screens) {
  console.log(screen.label, screen.width, 'x', screen.height);
}
// Open a window on a specific screen
window.open('/dashboard', '_blank',
  `left=${screenDetails.screens[1].left},top=0,width=800,height=600`);

Use cases

Use Window management
Use Window management when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Window management to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Window management in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Use cases

Use Window management

Handle edge cases

Cautions

Accessibility

Related links