screen Object

By: Dusty Arlia
Published on Tuesday, July 23, 2013, 04:25 PM
Last Updated on Tuesday, July 14, 2015 at 10:17 PM
Total Updates: 3

One of the objects in the browser object model (BOM) is the screen object. The screen object is used to access information about the visitor's screen. Here are some of the screen object's properties and values from my laptop using Google Chrome:

Screen property: availWidth = 1366
Screen property: availHeight = 728
Screen property: availTop = 0
Screen property: availLeft = 0
Screen property: pixelDepth = 32
Screen property: colorDepth = 32
Screen property: width = 1366
Screen property: height = 768

Your screen properties will look different depending on what browser and browser version you're using and your actual screen size of your device. The width and height properties combined equal your screen resolution.

This information was accessed using this JavaScript code which is just a for/in loop:

for (propt in screen) {
    document.write("Screen property: " + propt + " = " + screen[propt] + "<br />\n");

With this object's property information, you can customize your content to fit the screen in the most optimal way. For example, you can swap images or font-sizes when the webpage is displayed on a smartphone versus a laptop screen.