Window.screen

  • Revision slug: Web/API/window.screen
  • Revision title: window.screen
  • Revision id: 421093
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

{{DomRef}}

Summary

Returns a reference to the screen object associated with the window.

The screen object is a special object for inspecting properties of the screen on which the current window is being rendered.

Syntax

screenObj = window.screen;

Properties

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

Events handler

{{domxref("window.screen.onorientationchange", "onorientationchange")}}
A handler for the {{event("orientationchange")}} events.

Methods

{{domxref("window.screen.lockOrientation", "lockOrientation")}}
Lock the screen orientation (only works in fullscreen or for installed apps)
{{domxref("window.screen.unlockOrientation", "unlockOrientation")}}
Unlock the screen orientation (only works in fullscreen or for installed apps)

Methods inherit from {{domxref("EventTarget")}}

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

Example

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

Specification

{{DOM0}}

Revision Source

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Returns a reference to the screen object associated with the window.</p>
<p>The <code>screen</code> object is a special object for inspecting properties of the screen on which the current window is being rendered.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<var>screenObj</var> = <var>window</var>.screen;
</pre>
<h2 name="Example">Properties</h2>
<dl>
  <dt>
    {{domxref("window.screen.availTop", "screen.availTop")}}</dt>
  <dd>
    Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd>
  <dt>
    {{domxref("window.screen.availLeft", "screen.availLeft")}}</dt>
  <dd>
    Returns the first available pixel available from the left side of the screen.</dd>
  <dt>
    {{domxref("window.screen.availHeight", "screen.availHeight")}}</dt>
  <dd>
    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.</dd>
  <dt>
    {{domxref("window.screen.availWidth", "screen.availWidth")}}</dt>
  <dd>
    Returns the amount of horizontal space in pixels available to the window.</dd>
  <dt>
    {{domxref("window.screen.colorDepth", "screen.colorDepth")}}</dt>
  <dd>
    Returns the color depth of the screen.</dd>
  <dt>
    {{domxref("window.screen.height", "screen.height")}}</dt>
  <dd>
    Returns the height of the screen in pixels.</dd>
  <dt>
    {{domxref("window.screen.left", "screen.left")}}</dt>
  <dd>
    Returns the distance in pixels from the left side of the main screen to the left side of the current screen.</dd>
  <dt>
    {{domxref("window.screen.orientation", "screen.orientation")}}</dt>
  <dd>
    Returns the current orientation of the screen.</dd>
  <dt>
    {{domxref("window.screen.pixelDepth", "screen.pixelDepth")}}</dt>
  <dd>
    Gets the bit depth of the screen.</dd>
  <dt>
    {{domxref("window.screen.top", "screen.top")}}</dt>
  <dd>
    Returns the distance in pixels from the top side of the current screen.</dd>
  <dt>
    {{domxref("window.screen.width", "screen.width")}}</dt>
  <dd>
    Returns the width of the screen.</dd>
  <dt>
    {{domxref("window.screen.mozEnabled", "mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt>
  <dd>
    Boolean. Setting to false will turn off the device's screen.</dd>
  <dt>
    {{domxref("window.screen.mozBrightness", "mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt>
  <dd>
    Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.</dd>
</dl>
<h3>Events handler</h3>
<dl>
  <dt>
    {{domxref("window.screen.onorientationchange", "onorientationchange")}}</dt>
  <dd>
    A handler for the {{event("orientationchange")}} events.</dd>
</dl>
<h2>Methods</h2>
<dl>
  <dt>
    {{domxref("window.screen.lockOrientation", "lockOrientation")}}</dt>
  <dd>
    Lock the screen orientation (only works in fullscreen or for installed apps)</dd>
  <dt>
    {{domxref("window.screen.unlockOrientation", "unlockOrientation")}}</dt>
  <dd>
    Unlock the screen orientation (only works in fullscreen or for installed apps)</dd>
</dl>
<p>Methods inherit from {{domxref("EventTarget")}}</p>
<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush:js">
if (screen.pixelDepth &lt; 8) {
  // use low-color version of page
} else { 
  // use regular, colorful page
}
</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<p>{{DOM0}}</p>
Revert to this revision