In previous chapter you learn about JavaScript Window object. In this chapter you will learn about window screen.
You can get user’s screen information using JavaScript window screen object. This properties can be use to improve user experience of user based on its screen details.
It is not mandatory to write window prefix with screen object. It can be written without window prefix
You can use JavaScript screen.width property to determine the client browser’s screen width in pixels.
<!DOCTYPE html>
<html>
<body>
<p id="screenwidth"></p>
<script>
document.getElementById("screenwidth").innerHTML = "Your Screen Width: " + screen.width;
</script>
</body>
</html>
You can use JavaScript screen.height property to determine the client browser’s screen height in pixels.
<!DOCTYPE html>
<html>
<body>
<p id="screenheight"></p>
<script>
document.getElementById("screenheight").innerHTML = "Your Screen Height: " + screen.height;
</script>
</body>
</html>
You can use JavaScript screen.availWidth property to determine the client browser’s screen available width in pixels without windows taskbar.
<!DOCTYPE html>
<html>
<body>
<p id="screenwidth"></p>
<script>
document.getElementById("screenwidth").innerHTML = "Your Available Screen Width: " + screen.availWidth;
</script>
</body>
</html>
You can use JavaScript screen.availHeight property to determine the client browser’s screen available height in pixels without windows taskbar.
<!DOCTYPE html>
<html>
<body>
<p id="screenheight"></p>
<script>
document.getElementById("screenheight").innerHTML = "Your Available Screen height: " + screen.availHeight;
</script>
</body>
</html>
The screen.colorDepth property is use to determine the number of bits used to display one color.
Now a days all modern computers use 24 bit or 32 bit hardware for color resolution:
Older computers used 16 bits: 65,536 different “High Colors” resolution. Very old computers used only bits which results in only 256 different VGA colors only.
document.getElementById("screencolor").innerHTML = "Your Screen Color depth: " + screen.colorDepth;
You can use screen.pixelDepth property to deter mine pixel depth of screen.
document.getElementById("screencolor").innerHTML = "Your Screen Color depth: " + screen.pixelDepth;
In modern computer systems, color depth and pixel depth properties are equal.