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 height of the screen, excluding the windows taskbar |
| 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
}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
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.