Skip to content

Screen object in JavaScript | API

  • by

JavaScript Screen object is a built-in Interface that has information related to the browser screen on which the current window is rendered. It can be used to display screen width, height, color depth, pixel depth, etc.

The screen object can be accessed with or without specifying the window.

window.screen  
// OR
screen  

JavaScript Screen Object Properties

Some properties are used to get browser screen information.

PropertyDescription
availHeightspecifies the depth of the color palette, in bits, to display images
availWidthspecifies the width of the screen, excluding the Windows taskbar
colorDepthspecifies the depth of color palette, in bits, to display images
heightspecifies the total height of the screen
pixelDepthspecifies the color Resolution, in bits per pixel, of the screen
widthspecifies the total width of the screen

Note: There are no direct methods in the Screen method object.

Screen object in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
<head>
  <body>
    <script>
     console.log("Total Height :", screen.height);
     console.log("Total Width :", screen.width);
     console.log("Available Width :",screen.availWidth );
     console.log("Available Height :", screen.availHeight );
     console.log("Screen Color Depth :", screen.colorDepth );
     console.log("Screen Pixel Depth :",screen.pixelDepth );

   </script>

 </body>
 </html>

Output:

Screen object in JavaScript

Using with if statement

if (screen.pixelDepth < 8) {
  // use low-color version of page
} else {
  // use regular, colorful page
}

Note: The information provided by the Screen object can be useful for building responsive web applications, determining optimal window sizes, or adjusting content based on the user’s screen resolution and capabilities. However, it’s important to note that this information is based on the browser’s environment and can vary across different devices and browsers.

Do comment if you have any doubts or suggestions on this JS object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading