Widely available Supported across all major browsers. Safe to use in production.

Screen

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.

Display and Navigation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Screen
1
12
1
1
18
1
availHeight

The read-only Screen interface's availHeight property returns the height, in CSS pixels, of the space available for Web content on the screen. Since Screen is exposed on the Window interface's Window.screen property, you access availHeight using window.screen.availHeight.
1
12
1
1
18
1
availWidth

The Screen.availWidth property returns the amount of horizontal space (in CSS pixels) available to the window.
1
12
1
1
18
1
colorDepth

The Screen.colorDepth read-only property returns the color depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons. See the browser compatibility section for those that don't.
1
12
1
1
18
1
height

The Screen.height read-only property returns the height of the screen in CSS pixels.
1
12
1
1
18
1
pixelDepth

Returns the bit depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons. See the browser compatibility section for those that don't.
1
12
1
1
18
1
width

The Screen.width read-only property returns the width of the screen in CSS pixels.
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Always reflects the main screen.
Notes 1 item(s)
Implementation note
  • Always reflects the main screen.
Notes 1 item(s)
Implementation note
  • Starting with version 59 this property is no longer required to always return 24.
Notes 1 item(s)
Implementation note
  • Starting with version 59 this property is no longer required to always return 24.
Notes 1 item(s)
Implementation note
  • Starting with version 59 this property is no longer required to always return 24.
Notes 1 item(s)
Implementation note
  • Starting with version 59 this property is no longer required to always return 24.

Syntax

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

Use cases

  • Using Screen

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

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links