ScreenDetailed

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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.

Screen ScreenDetailed

Instance 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.

Events

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.

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:

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

Note: See Multi-window learning environment for a full example (see the source code also).

Specifications

Specification
Window Management
# api-screendetailed-interface

Browser compatibility

BCD tables only load in the browser

See also