Window: getScreenDetails() method

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.

ThegetScreenDetails() method of theWindow interface returns aPromise that fulfills with aScreenDetails object instance representing the details of all the screens available to the user's device.

Syntax

getScreenDetails()

Parameters

None.

Return value

APromise that fulfills with aScreenDetails object instance.

Exceptions

NotAllowedErrorDOMException: Thrown if awindow-managementPermissions-Policy is set that blocks use of theWindow Management API, or if the user has explicitly denied the browser's permission request to use the API.

Examples

WhengetScreenDetails() 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 contains details of all the screens available to the user's system.

The below example opens a full-size window on each available display.

const screenDetails = await window.getScreenDetails();// Open a full-size window on each screen available to the devicefor (const screen of screenDetails.screens) {  window.open(    "https://example.com",    "_blank",    `left=${screen.availLeft},    top=${screen.availTop},    width=${screen.availWidth},    height=${screen.availHeight}`,  );}

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