We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.


Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
Returns the first available pixel available from the left side of the screen.
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.
Returns the amount of horizontal space in pixels available to the window.
Returns the color depth of the screen.
Returns the height of the screen in pixels.
Returns the distance in pixels from the left side of the main screen to the left side of the current screen.
Returns the current orientation of the screen.
Gets the bit depth of the screen.
Returns the distance in pixels from the top side of the current screen.
Returns the width of the screen.
Boolean. Setting to false will turn off the device's screen.
Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.

Events handler

A handler for the orientationchange events.


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

Methods inherit from EventTarget

Register an event handler of a specific event type on the EventTarget.
Removes an event listener from the EventTarget.
Dispatch an event to this EventTarget.

Additional methods for Mozilla chrome code

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

  • void setEventHandler(DOMString type, EventHandler handler)
  • EventHandler getEventHandler(DOMString type)


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


Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'Screen' in that specification.
Working Draft  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes)[1] (Yes) ? (Yes) (Yes)
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) ? ? ? (Yes) ?

[1] Only height and width reflect the current screen; availHeight and availWidth always reflect the main screen; availLeft and availTop are not implemented.

Document Tags and Contributors

Last updated by: tshinnic,