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