Screen

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The Screen interface represents a screen, usually the one on which the current window is being rendered, and is obtained using window.screen.

Note that browsers determine which screen to report as current by detecting which screen has the center of the browser window.

Instance properties

Also inherits properties from its parent EventTarget.

Screen.availHeight

Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.

Screen.availWidth

Returns the amount of horizontal space in pixels available to the window.

Screen.colorDepth

Returns the color depth of the screen.

Screen.height

Returns the height of the screen in pixels.

Screen.isExtended Experimental Secure context

Returns true if the user's device has multiple screens, and false if not.

Screen.orientation

Returns the ScreenOrientation instance associated with this screen.

Screen.pixelDepth

Gets the bit depth of the screen.

Screen.width

Returns the width of the screen.

Screen.mozEnabled Non-standard Deprecated

Boolean. Setting to false will turn off the device's screen.

Screen.mozBrightness Non-standard Deprecated

Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.

Non-standard properties

The following properties are specified as part of the Window Management API, which makes them available on the ScreenDetailed interface; this is where we have chosen to document them. However, non-standard versions of these properties are available on the Screen interface in browsers that don't support that API. See this page's Browser compatibility table for details of the non-standard support.

Screen.availLeft Read only Non-standard Secure context

A number representing the x-coordinate (left-hand edge) of the available screen area.

Screen.availTop Read only Non-standard Secure context

A number representing the y-coordinate (top edge) of the available screen area.

Screen.left Read only Non-standard Secure context

A number representing the x-coordinate (left-hand edge) of the total screen area.

Screen.top Read only Non-standard Deprecated Secure context

A number representing the y-coordinate (top edge) of the total screen area.

Instance methods

Also inherits methods from its parent EventTarget.

Screen.lockOrientation Deprecated

Lock the screen orientation (only works in fullscreen or for installed apps)

Screen.unlockOrientation Deprecated

Unlock the screen orientation (only works in fullscreen or for installed apps)

Events

change Experimental Secure context

Fired on a specific screen when it changes in some way — width or height, available width or height, color depth, or orientation.

orientationchange Deprecated Non-standard

Fires when the screen orientation changes.

Examples

js
if (screen.colorDepth < 8) {
  // use low-color version of page
} else {
  // use regular, colorful page
}

Specifications

Specification
CSSOM View Module
# the-screen-interface

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Screen
availHeight
availLeft
Non-standard
Relative to the Multi-screen origin
Non-standard
availTop
Non-standard
Relative to the Multi-screen origin
Non-standard
availWidth
change event
Experimental
colorDepth
height
isExtended
Experimental
left
Non-standard
Relative to the Multi-screen origin
Non-standard
lockOrientation
Deprecated
mozBrightness
DeprecatedNon-standard
mozEnabled
DeprecatedNon-standard
orientation
orientationchange event
DeprecatedNon-standard
pixelDepth
top
DeprecatedNon-standard
Relative to the Multi-screen origin
DeprecatedNon-standard
unlockOrientation
Deprecated
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Has more compatibility info.