Learn About JavaScript Window Width and Height Using Real Examples

Screens differ in size and the way they display colors. When you're coding in JavaScript, screen width, or height can make a big difference as well. This tutorial will teach you to get the JavaScript window width and other screen size parameters.

BOM helps JavaScript communicate with the browser. It has a few separate components: history, location, navigator, document and screen. This tutorial discusses the screen component. You will get to know various properties for detecting the height and width of the screen, both including the interface and excluding it.

JavaScript Window Screen: Main Tips

• The object window.screen holds information about the screen of the browser, such as JavaScript screen width and height.
• Modern technology uses 32 bit (4,294,967,296 colors) and 24 bit (16,777,216 colors) color resolution.
• Old computers use 16 bit (65,536 colors) resolution. You can sometimes see computers and cell phones that use 8 bit (256 VGA colors), but that's extremely old technology.
• Pixel depth and color depth are equal for new computers.

Screen Properties

Using window.screen objects you can perform various tasks related to the user's screen. For example, you can get the JavaScript window width and height, pixel depth, and other information. Let's view all the properties one by one to get a better understanding of the possibilities they grant us.

In the example below, we use JavaScript window width detection property screen.width:

document.write("The width of your screen: " + screen.width);

In addition to width, you can detect JavaScript window height, too. The property you should use for that is called screen.height:

document.write("The height of your screen: " + screen.height);

Now, screen.availWidth property stands for available JavaScript window width. It returns the width of the visitor's screen and subtracts the width of the interface (e.g. taskbars):

document.write("Your available screen width: " + screen.availWidth);

screen.availHeight works in a very similar way, but it stands for available JavaScript window height. The property returns the JavaScript window height of the visitor's screen and subtracts the height of the interface (e.g. taskbars).

document.write("Your available screen height: " + screen.availHeight);

To find out the width and height of the content area, you can also use window.innerWidth and window.innerHeight. Keep in mind both of these properties are read-only.

To return the amount of bits used to display one color, you may use screen.colorDepth. See the example below to find out this information about your own screen:

document.write("Color depth of your screen: " + screen.colorDepth);

To get the screen's pixel depth, we can use screen.pixelDepth property:

document.write("Pixel depth of your screen: " + screen.pixelDepth);

JavaScript Window Screen: Summary

• You can use the window.screen object to access information about the screen of the browser, like make JavaScript get window width.
• window.screen object contains multiple properties. You can use them for JavaScript window width and height detection and more.
• To get the width of the content area of the screen, window.innerwidth should be used.