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.

Properties

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

Events handler

Screen.onorientationchange
A handler for the orientationchange events.

Methods

Screen.lockOrientation
Lock the screen orientation (only works in fullscreen or for installed apps)
Screen.unlockOrientation
Unlock the screen orientation (only works in fullscreen or for installed apps)

Methods inherit from EventTarget

EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
EventTarget.dispatchEvent()
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)

Example

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

Specification

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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes ? Yes Yes
availHeight Yes Yes1 Yes ? Yes Yes
availLeft Yes No Yes ? Yes Yes
availTop Yes No Yes ? Yes Yes
availWidth Yes Yes1 Yes ? Yes Yes
colorDepth Yes2 ? Yes ? Yes Yes
height Yes Yes Yes ? Yes Yes
left Yes Yes Yes ? Yes Yes
lockOrientation38 ? Yes moz 11 ms Yes No
mozBrightness No No123 No No No
mozEnabled No No125 No No No
onorientationchange No No No No No No
orientation38 ?

Yes

Yes moz

11 ms 825 No
pixelDepth Yes2 ? Yes ? Yes Yes
top Yes Yes Yes ? Yes Yes
unlockOrientation38 ? Yes moz 11 ms Yes No
width Yes Yes Yes ? Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes
availHeight Yes Yes Yes Yes Yes ? Yes
availLeft Yes Yes No Yes Yes ? Yes
availTop Yes Yes No Yes Yes ? Yes
availWidth Yes Yes Yes Yes Yes ? Yes
colorDepth Yes2 Yes2 ? Yes Yes ? Yes
height Yes Yes Yes Yes Yes ? Yes
left Yes Yes Yes Yes Yes ? Yes
lockOrientation3838 ? Yes moz Yes No Yes
mozBrightness No No No144 No No No
mozEnabled No No No146 No No No
onorientationchange No No No Yes7 No No No
orientation No39 ?

Yes

Yes moz

No No ?
pixelDepth Yes2 Yes2 ? Yes Yes ? Yes
top Yes Yes Yes Yes Yes ? Yes
unlockOrientation3838 ? Yes moz Yes No Yes
width Yes Yes Yes Yes Yes ? Yes

1. Always reflects the main screen.

2. Starting with version 59 this property is no longer required to always return 24.

3. From version 12: this feature is behind the dom.screenBrightnessProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 14: this feature is behind the dom.screenBrightnessProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. From version 12: this feature is behind the dom.screenEnabledProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

6. From version 14: this feature is behind the dom.screenEnabledProperty.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

7. Supported as onmozorientationchange.

8. Not supported on Windows 7.

 

Document Tags and Contributors

Last updated by: Hirse,