LAST UPDATED: MAY 9, 2020
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.
