JavaScript - Screen Object

Window Screen Object

Thescreenobject in JavaScript is a property of the ‘window’ object. The ‘screen’ object’s properties contain information about the device’s screen. Thescreenobject can be accessed by using thewindow.screensyntax. We can also access it without using thewindowobject.

Screen Object Properties

Thescreenobject has a number of properties that provide information about the screen’s orientation, resolution, and more. These properties can be used to develop applications that are responsive to different screen sizes and orientations.

Following are some properties of the JavaScript screen object −

• width− The width of the screen in pixels.
• height− The height of the screen in pixels.
• availWidth− The width of the screen, minus the width of the window taskbar.
• availHeight− The height of the screen, minus the height of the window taskbar.
• colorDepth− The number of bits per pixel that the screen can display.
• pixelDepth− The number of bits per pixel that the screen is actually using.

Screen Object Property Syntax

Follow the syntax below to use the property of the screen object in JavaScript −

window.screen.property;
OR
screen.property;

You may or may not use the ‘window’ object to access the screen object.

Example

In the example below, we access the various properties of the screen object with referencing thescreenas the property ofwindowobject.

Output

Screen Information
screen height: 864
screen width: 1536
screen colorDepth: 24
screen pixelDepth: 24
screen availHeight: 816
screen availWidth: 1536

Example

In the below code, we access the various properties of the screen object and observe their value. In this example we are not referencing thewindowobject to access thescreenobject.

Output

Screen Information
screen height: 864
screen width: 1536
screen colorDepth: 24
screen pixelDepth: 24
screen availHeight: 816
screen availWidth: 1536

Please note that we get the same information about the screen in the above two examples.

Screen Object Properties List

Below, we have covered all properties of the ‘screen’ object with a description. You need to use the ‘screen’ as a reference to access these properties.

PropertyDescriptionavailHeightIt gives the height of the screen without including the taskbar.availWidthIt gives the width of the screen without including the taskbar.colorDepthIt gives the depth of the color palette to display images.heightIt returns the total height of the screen.pixelDepthIt is used to get the color resolution of the screen.widthTo get the total width of the screen.