JavaScript Window Screen

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.

Window Screen

It is not mandatory to write window prefix with screen object. It can be written without window prefix

Properties of Window Screen object

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth

Window Screen Width

You can use JavaScript screen.width property to determine the client browser’s screen width in pixels.

Example

<!DOCTYPE html>
<html>
<body>

<p id="screenwidth"></p>

<script>
document.getElementById("screenwidth").innerHTML = "Your Screen Width: " + screen.width;
</script>

</body>
</html>

Download the code Run the code

Window Screen Height

You can use JavaScript screen.height property to determine the client browser’s screen height in pixels.

Example

<!DOCTYPE html>
<html>
<body>

<p id="screenheight"></p>

<script>
document.getElementById("screenheight").innerHTML = "Your Screen Height: " + screen.height;
</script>

</body>
</html>

Download the code Run the code

Available Screen Width

You can use JavaScript screen.availWidth property to determine the client browser’s screen available width in pixels without windows taskbar.

Example

<!DOCTYPE html>
<html>
<body>

<p id="screenwidth"></p>

<script>
document.getElementById("screenwidth").innerHTML = "Your Available Screen Width: " + screen.availWidth;
</script>

</body>
</html>

Download the code Run the code

Available Screen Height

You can use JavaScript screen.availHeight property to determine the client browser’s screen available height in pixels without windows taskbar.

Example

<!DOCTYPE html>
<html>
<body>

<p id="screenheight"></p>

<script>
document.getElementById("screenheight").innerHTML = "Your Available Screen height: " + screen.availHeight;
</script>

</body>
</html>

Download the code Run the code

Screen Color Depth

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:

  • 24 bits = 16,777,216 different “True Colors”
  • 32 bits = 4,294,967,296 different “Deep Colors”

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.

Example

document.getElementById("screencolor").innerHTML = "Your Screen Color depth: " + screen.colorDepth;

Screen Pixel Depth

You can use screen.pixelDepth property to deter mine pixel depth of screen.

Example

document.getElementById("screencolor").innerHTML = "Your Screen Color depth: " + screen.pixelDepth;

In modern computer systems, color depth and pixel depth properties are equal.

<<< JavaScript Window ObjectJavaScript Cookies >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .