JavaScript Window Screen
This object contain information about the browser's screen. It can give information about screen width,
height, pixelDepth etc.
Screen Object Methods
| Property |
Description |
| width |
It shows the width of the screen. |
| height |
It shows the height of the screen. |
| colorDepth |
It Returns the color depth. |
| pixelDipth |
It Returns the pixel depth. |
| availwidth |
It shows the available width. |
| availheight |
It shows the available height. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Screen Object </title>
</head>
<body>
<script>
document.writeln("<br/>screen.width: "+screen.width);
document.writeln("<br/>screen.height: "+screen.height);
document.writeln("<br/>screen.availWidth: "+screen.availWidth);
document.writeln("<br/>screen.availHeight: "+screen.availHeight);
document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);
document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);
</script>
</body>
</html>
Output
Window Screen Width
The screen.width property gives the total width of the screen in pixels.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Screen Width </title>
</head>
<body>
<p id="width"></p>
<script>
document.getElementById("width").innerHTML = "Screen width is " + screen.width;
</script>
</body>
</html>
Output
Window Screen Height
The screen.height property gives the total height of the screen in pixels.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Screen Height </title>
</head>
<body>
<p id="height"></p>
<script>
document.getElementById("height").innerHTML = "Screen height is " + screen.height;
</script>
</body>
</html>
Output
Window Screen Available height/Width
The screen.availWidth property gives the available width of the screen in pixels subtracting the width of features like taskbar, if any.
The
screen.availheight also works the same for available height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Screen Available Width </title>
</head>
<body>
<p id="availWidth"></p>
<script>
document.getElementById("availWidth").innerHTML = "Available screen width is " + screen.availWidth;
</script>
</body>
</html>
Output
JavaScript Screen Available Width
Window Pixel/Color Depth
The screen.pixelDepth property gives pixel depth of the visitor's screen.
The screen.colorDepth property gives information about color depth, i.e. number of bits used to display one color.
Nowadays, the Color and Pixel Depth remains same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Screen colorDepth </title>
</head>
<p id="color"></p>
<script>
document.getElementById("color").innerHTML = "Screen color depth is " + screen.colorDepth;
</script>
</body>
</html>
Output
JavaScript Screen colorDepth