What are the properties of window.screen object in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will discuss the properties of the window.screen object in JavaScript.

The window comes under the Browser Object Model – BOM. The window's screen object holds information on the user's screen. Because the scope of the window object is high, we can also write the window's screen object as "screen".

There are no direct methods for the screen object. The object's use is to improve the UI experience of a webpage.

Properties of window.screen Object

availHeight

The availHeight property returns the screen height, excluding the Windows Taskbar.

availWidth

The availWidth property returns the screen width, excluding the Windows Taskbar. We can use this property to decide the size of images for inclusion in a document or to create multiple browser windows.

colorDepth

The colorDepth property returns the bit depth of the color palette for image display.

The window's screen property denotes the base-2 logarithm of the color numbers. The color depth says how many colors a device screen can generate. More bits produce more color variations.

24 bits almost always use 8 bits of each of R, G, and B. In 32-bit color depth, 24 bits for the color, and the remaining 8 bits for transparency.

24bits = 16,777,216 different "True Colors". 32 bits = 4,294,967,296 different "Deep Colors".

Earlier systems had 16 bits = 65,536 different "High Colors" resolutions. Very old systems and old cell phones had 8 bits = 256 different "VGA colors". All modern systems use 24-bit or 32-bit hardware for color resolution.

height

The height property returns the screen's total height.

pixelDepth

The pixelDepth property returns the screen's color resolution in bits per pixel.

For modern devices, color depth and pixel depth are the same.

width

The width property returns the screen's total width.

availTop

The availTop property returns the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.

availLeft

The availLeft property returns the first available pixel available from the left side of the screen.

left

The left property returns the distance in pixels values from the left side of the main screen to the left side of the existing screen.

orientation

The orientation property returns the ScreenOrientation instance associated with the screen.

top

The top property returns the distance in pixels from the top side of the current screen.

Users can follow the syntax below to access these properties.

Syntax

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
screen.availTop
screen.availLeft
screen.left
screen.orientation
screen.top

With this syntax, we can access the available screen properties.

Example 1

In this example, we access the screen object's available properties as in the syntax above.


<html>
<body>
   <h2>Getting the window’s screen object's properties</i></h2>
   <div id = "btnWrap">
      <p>Click the button to view the screen object's properties</p>
      <button onclick = "getScreenProp()"> Click Me </button>
   </div>
   <div id = "dispDom"></div>
   <script>
      var btnObj = document.getElementById("btnWrap");
      var dispObj = document.getElementById("dispDom");
      var dispStr = "";
      function getScreenProp()
      {
         btnObj.style.display = "none";
         dispStr += "<br/>screen.width: "+screen.width;
         dispStr += "<br/>screen.height: "+screen.height;
         dispStr += "<br/>screen.availWidth: "+screen.availWidth;
         dispStr += "<br/>screen.availHeight: "+screen.availHeight;
         dispStr += "<br/>screen.colorDepth: "+screen.colorDepth;
         dispStr += "<br/>screen.pixelDepth: "+screen.pixelDepth;
         dispStr += "<br/>screen.availTop: "+screen.availTop;
         dispStr += "<br/>screen.availLeft: "+screen.availLeft;
         dispObj.innerHTML = dispStr;
      }
   </script>
</body>
</html>

Example 2

In this example, we calculate the mobile screen resolution using the screen width, screen height, and the window pixel ratio.


<html>
<body>
   <h2>Gettting the native screen resolution using window’s screen object's properties</h2>
   <div id = "resBtnWrap">
      <p>Click the button to get the native screen resolution</p>
      <button onclick = "getScreenResolution()">Click Me</button>
   </div>
   <div id = "resDispDom">
   <script>
      var resBtnObj = document.getElementById("resBtnWrap");
      var resDispObj = document.getElementById("resDispDom");
      var resDispStr = "";
      function getScreenResolution()
      {
         //resBtnObj.style.display = "none";
         resDispStr += (window.screen.width * window.devicePixelRatio) + " X " + (window.screen.height * window.devicePixelRatio);
         resDispObj.innerHTML = "Your screen resolution is <b>" + resDispStr + "</b>";
      }
   </script>
</body>
</html>

In this tutorial, we have discussed the window's screen object and its properties. To enhance the user's UI experience, we can use this object on our web pages.