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
ScreenOrientationinstance associated with this 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
orientationchangeevent.
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 inherited from EventTarget:
EventTarget.addEventListener()- Registers an event handler of a specific event type on the
EventTarget. EventTarget.removeEventListener()- Removes an event listener from the
EventTarget. EventTarget.dispatchEvent()- Dispatches an event to this
EventTarget.
Additional methods in Mozilla chrome codebase
Mozilla includes a couple of extensions for use by JS-implemented event targets to implement onevent 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 | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Screen | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
availHeight | Chrome Full support 40 | Edge
Full support
12
| Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 4.0 |
availLeft | Chrome Full support Yes | Edge Full support 79 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
availTop | Chrome Full support 40 | Edge Full support 79 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support 4.0 |
availWidth | Chrome Full support Yes | Edge
Full support
12
| Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
colorDepth | Chrome
Full support
40
| Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android
Full support
40
| Chrome Android
Full support
40
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android
Full support
4.0
|
height | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
left | Chrome No support No | Edge No support ≤18 — 79 | Firefox Full support Yes | IE ? | Opera No support No | Safari Full support Yes | WebView Android No support No | Chrome Android No support No | Firefox Android Full support Yes | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
lockOrientation | Chrome Full support 38 | Edge
Full support
12
| Firefox
Full support
Yes
| IE
Full support
11
| Opera Full support Yes | Safari No support No | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android
Full support
Yes
| Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 3.0 |
mozBrightness | Chrome No support No | Edge No support No | Firefox
Full support
12
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
14
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
mozEnabled | Chrome No support No | Edge No support No | Firefox
Full support
12
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
14
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
onorientationchange | Chrome No support No | Edge
No support
≤18 — 79
| Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
Yes
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
orientation | Chrome Full support 38 | Edge
Full support
12
| Firefox
Full support
Yes
| IE
Full support
11
| Opera Full support 25 | Safari No support No | WebView Android No support No | Chrome Android Full support 39 | Firefox Android
Full support
Yes
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
pixelDepth | Chrome
Full support
40
| Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android
Full support
Yes
| Chrome Android
Full support
Yes
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android
Full support
Yes
|
top | Chrome No support No | Edge No support ≤18 — 79 | Firefox Full support Yes | IE ? | Opera No support No | Safari Full support Yes | WebView Android No support No | Chrome Android No support No | Firefox Android Full support Yes | Opera Android No support No | Safari iOS ? | Samsung Internet Android No support No |
unlockOrientation | Chrome Full support 38 | Edge
Full support
12
| Firefox
Full support
Yes
| IE
Full support
11
| Opera Full support Yes | Safari No support No | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android
Full support
Yes
| Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 3.0 |
width | Chrome Full support 40 | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
