ScreenDetailed

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

TheScreenDetailed interface of theWindow Management API represents detailed information about one specific screen available to the user's device.

ScreenDetailed objects can be accessed via theScreenDetails.screens andScreenDetails.currentScreen properties.

Instance properties

Inherits properties from its parent,Screen.

availLeftRead onlyExperimental: A number representing the x-coordinate (left-hand edge) of the available screen area.
availTopRead onlyExperimental: A number representing the y-coordinate (top edge) of the available screen area.
devicePixelRatioRead onlyExperimental: A number representing the screen's device pixel ratio.
isInternalRead onlyExperimental: A boolean indicating whether the screen is internal to the device or external.
isPrimaryRead onlyExperimental: A boolean indicating whether the screen is set as the operating system (OS) primary screen or not.
labelRead onlyExperimental: A string providing a descriptive label for the screen, for example "Built-in Retina Display".
leftRead onlyExperimental: A number representing the x-coordinate (left-hand edge) of the total screen area.
topRead onlyExperimental: A number representing the y-coordinate (top edge) of the total screen area.

Events

Inherits events from its parent,Screen.

changeExperimental: 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.

WhenWindow.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 usingPermissions.query() to querywindow-management). Provided they grant permission, the resultingScreenDetails object containsScreenDetailed 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 ScreenDetailsconst allScreens = await window.getScreenDetails();// Return the primary screen ScreenDetailed objectconst primaryScreenDetailed = allScreens.screens.find(  (screenDetailed) => screenDetailed.isPrimary,);// Open a window in the top-left corner of the OS primary screenwindow.open(  "https://example.com",  "_blank",  `left=${primaryScreenDetailed.availLeft},   top=${primaryScreenDetailed.availTop},   width=200,   height=200`,);

Note:SeeMulti-window learning environment for a full example (see thesource code also).