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

ScreenDetailedInstance 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 with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Window Management API