”;
Window Screen Object
The screen object in JavaScript is a property of the ”window” object. The ”screen” object”s properties contain information about the device”s screen. The screen object can be accessed by using the window.screen syntax. We can also access it without using the window object.
Screen Object Properties
The screen object 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 the screen as the property of window object.
<html>
<body>
<p> Screen Information </p>
<div id = "output"> </div>
<script>
document.getElementById("output").innerHTML =
"screen height: " + window.screen.height + "<br>" +
"screen width: " + window.screen.width + "<br>" +
"screen colorDepth: " + window.screen.colorDepth + "<br>" +
"screen pixelDepth: " + window.screen.pixelDepth + "<br>" +
"screen availHeight: " + window.screen.availHeight + "<br>" +
"screen availWidth: " + window.screen.availWidth;
</script>
</body>
</html>
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 the window object to access the screen object.
<html>
<body>
<p> Screen Information </p>
<div id = "output"> </div>
<script>
document.getElementById("output").innerHTML =
"screen height: " + screen.height + "<br>" +
"screen width: " + screen.width + "<br>" +
"screen colorDepth: " + screen.colorDepth + "<br>" +
"screen pixelDepth: " + screen.pixelDepth + "<br>" +
"screen availHeight: " + screen.availHeight + "<br>" +
"screen availWidth: " + screen.availWidth;
</script>
</body>
</html>
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.
| Property | Description |
|---|---|
| availHeight | It gives the height of the screen without including the taskbar. |
| availWidth | It gives the width of the screen without including the taskbar. |
| colorDepth | It gives the depth of the color palette to display images. |
| height | It returns the total height of the screen. |
| pixelDepth | It is used to get the color resolution of the screen. |
| width | To get the total width of the screen. |
”;