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.
| Property | Description |
|---|---|
| availHeight | specifies the depth of the color palette, in bits, to display images |
| availWidth | specifies the width of the screen, excluding the Windows taskbar |
| colorDepth | specifies the depth of color palette, in bits, to display images |
| height | specifies the total height of the screen |
| pixelDepth | specifies the color Resolution, in bits per pixel, of the screen |
| width | specifies 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:
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