ScreenDetailed

Instance properties

Inherits properties from its parent, Screen.

availLeft Read only

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

availTop Read only

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

devicePixelRatio Read only

A number representing the screen's device pixel ratio.

isInternal Read only

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

isPrimary Read only

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

label Read only

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

left Read only

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

top Read only

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

Events

Inherits events from its parent, Screen.

change

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.

Examples

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`,
);

Specifications

Browser compatibility

See also

• Window Management API