ScreenDetailed

The ScreenDetailed interface of the Window Management API represents detailed information about one specific screen available to the user's device.

ScreenDetailed objects can be accessed via the ScreenDetails.screens and ScreenDetails.currentScreen properties.

Inherits properties from its parent, Screen.

availLeft Read only Experimental

A number representing the x-coordinate (left-hand edge) of the available screen area.

availTop Read only Experimental

A number representing the y-coordinate (top edge) of the available screen area.

devicePixelRatio Read only Experimental

A number representing the screen's device pixel ratio.

isInternal Read only Experimental

A boolean indicating whether the screen is internal to the device or external.

isPrimary Read only Experimental

A boolean indicating whether the screen is set as the operating system (OS) primary screen or not.

label Read only Experimental

A string providing a descriptive label for the screen, for example "Built-in Retina Display".

left Read only Experimental

A number representing the x-coordinate (left-hand edge) of the total screen area.

top Read only Experimental

A number representing the y-coordinate (top edge) of the total screen area.

Inherits events from its parent, Screen.

change Experimental

Fired on a specific screen when any property of the screen changes — width or height, available width or available height, color depth, or orientation, screen position and available screen position, device pixel ratio, label or screen's designation.

When Window.getScreenDetails() is invoked, the user will be asked for permission to manage windows on all their displays (the status of this permission can be checked using Permissions.query() to query window-management). Provided they grant permission, the resulting ScreenDetails object contains ScreenDetailed objects representing all the screens available to the user's system.

The following example opens a window in the top-left corner of the OS primary screen:

// Return ScreenDetails
const allScreens = await window.getScreenDetails();

// Return the primary screen ScreenDetailed object
const primaryScreenDetailed = allScreens.screens.find(
  (screenDetailed) => screenDetailed.isPrimary,
);

// Open a window in the top-left corner of the OS primary screen
window.open(
  "https://example.com",
  "_blank",
  `left=${primaryScreenDetailed.availLeft},
   top=${primaryScreenDetailed.availTop},
   width=200,
   height=200`,
);

• Window Management API