Advertisement

Advertisement


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

JavaScript Screen Object

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

JavaScript Screen Width


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

JavaScript Screen Height


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










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.