See the Tutorial List

JavaScript Screen Object

JavaScript Screen is a built-in Interface (object type) that is used to fetch information related to the browser screen on which the current window is rendered.

It provides information about the dimensions of the display screen such as its height, width, color bits, etc.

Since the window object is at the top of the scope chain, the property window.screen gives the Screen object, but the screen object can be accessed without specifying the window too, in that case JavaScript automatically detects the browser window, which is created by JavaScript Runtime Engine.

Let's take a simple example to see the working of the screen object.

Find the Height and Width of Screen:

In the example below we have used the screen object to get the width and height of the screen:

JavaScript Screen Object Properties

JavaScript Screen object includes some properties that are used to get browser screen information. A table of such properties is given below.

Property Description
availHeight specifies the height of screen, excluding the windows taskbar
availWidth specifies the width of the screen, excluding the Windows taskbar
colorDepth specifies the depth of color palette, in bits, to display images
height specifies the total height of the screen
pixelDepth specifies the color Resolution, in bits per pixel, of the screen
width specifies the total width of the screen

Now, we will take an example to clear the concepts of Screen Object Properties:

The Screen object colorDepth property is the number of bits used to represent the color of a single pixel. It returns the bit depth of the color palette for displaying images.

JavaScript Screen Object Methods

There are no direct methods in the Screen method object.

Uses of Screen Object

The JavaScript Screen object can be used for improving the user experience by controlling the UI of the web app or website based on the screen size.