Firefox Tomorrow

web api interface

ScreenDetailed

View on MDN ↗

Limited availabilitySecure context

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 screens and 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 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 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

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also