JavaScript - Screen Object

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.