Javascript BOM: Screen Object

This is the third article in the Javascript BOM Series I've been writing... In the first article, I talked about the Window object. In the second, I wrote about the History and Navigator objects, and now in the final article of the series, I'll be writing on Javascript's Screen object.

By the time you're done reading this article, you should know all the essentials of Javascript's Screen object, and you'll also see a bunch of practical examples of their applications.

Javascript Screen Object

Javascript's screen object is a unique object that implements the Screen interface and is used to inspect the attributes of the screen that the current window is being produced. This object has various properties that may be used to detect and set some properties of the client's screen.

window.screen

Let's look at a basic example to show how the screen object works.

In the following example, we utilized Javascript's screen object to determine the height and Width of the screen:

<!doctype html>
	<head>
		<title>Example of JavaScript Screen Object</title>
	</head>
	<body>
		<h3>JS Screen Object</h3>

		<script>
			document.writeln("Total Height: " + screen.height +"<br>");
            document.writeln("Total Width: " + screen.width +"<br>");
		</script>
	</body>
</html>

Because the window object is located at the top of the scope chain, "window.screen" returns the Screen object; however, the Screen object may also be accessed without providing the window; in this instance, JavaScript recognizes the browser window, which is constructed by the JS Runtime Engine.

JS Screen Object Properties

Some properties (attributes) of the JavaScript Screen object are used to obtain browser screen information. A list of such properties (attributes) is shown below.

  1. The screen's height, with the exception of the Windows taskbar, is specified by availHeight.
  2. The screen's width, with the exception of the Windows taskbar, is specified by availWidth.
  3. colorDepth defines the depth of the color palette to show pictures.
  4. Height indicates the entire height of the screen.
  5. The screen's Width is specified by Width.
  6. The color Resolution of the screen is specified by pixelDepth.

Example

<!DOCTYPE HTML>
<html>
<head>
   <title>JS Screen Object Example</title>
</head>
<body>

<h3>Example of JS Screen Object</h3>
<script type="text/javascript">
   document.writeln("<b>Total Weight = </b>" + screen.width + "<br/>");
   document.writeln("<b>Total Height = </b>" + screen.height + "<br/>");
   document.writeln("<b>Available Height = </b>" + screen.availHeight + "<br/>");
   document.writeln("<b>Available Width = </b>" + screen.availWidth + "<br/>");
   document.writeln("<b>Screen Pixel Depth = </b>" + screen.pixelDepth + "<br/>");
   document.writeln("<b>Screen Color Depth = </b>" + screen.colorDepth + "<br/>");
</script>   
   
</body>
</html>

Use of Javascript Screen Object

The JavaScript Screen object may be used to improve user experience by adjusting the Interface of a web application or website depending on screen size (Width and Height).