JavaScript Window Screen

In this tutorial you will learn about the JavaScript window screen object.

The Screen Object

The window.screen object contains information about the user's screen such as resolution (i.e. width and height of the screen), color depth, pixel depth, etc.

Since window object is at the top of the scope chain, so properties of the window.screen object can be accessed without specifying the window. prefix, for example window.screen.width can be written as screen.width. The following section will show you how to get information of the user's display using the screen object property of the window object.

Getting Width and Height of the Screen

You can use the screen.width and screen.height property obtains the width and height of the user's screen in pixels. The following example will display your screen resolution on button click:

<script>
function getResolution() {
    alert("Your screen is: " + screen.width + "x" + screen.height);
}
</script>
 
<button type="button" onclick="getResolution();">Get Resolution</button>

Getting Available Width and Height of the Screen

The screen.availWidth and screen.availHeight property can be used to get the width and height available to the browser for its use on user's screen, in pixels.

The screen's available width and height is equal to screen's actual width and height minus width and height of interface features like the taskbar in Windows. Here's an example:

<script>
function getAvailSize() {
    alert("Available Screen Width: " + screen.availWidth + ", Height: " + screen.availHeight);
}
</script>
 
<button type="button" onclick="getAvailSize();">Get Available Size</button>

Getting Screen Color Depth

You can use the screen.colorDepth property to get the color depth of the user's screen. Color depth is the number of bits used to represent the color of a single pixel.

Color depth indicates how many colors a device screen is capable to produce. For example, screen with color depth of 8 can produce 256 colors (2⁸).

Currently, most devices has screen with color depth of 24 or 32. In simple words more bits produce more color variations, like 24 bits can produce 2²⁴ = 16,777,216 color variations (true colors), whereas 32 bits can produce 2³² = 4,294,967,296 color variations (deep colors).

<script>
function getColorDepth() {
    alert("Your screen color depth is: " + screen.colorDepth);
}
</script>
 
<button type="button" onclick="getColorDepth();">Get Color Depth</button>

Getting Screen Pixel Depth

You can get the pixel depth of the screen using the screen.pixelDepth property. Pixel depth is the number of bits used per pixel by the system display hardware.

For modern devices, color depth and pixel depth are equal. Here's an example:

<script>
function getPixelDepth() {
    alert("Your screen pixel depth is: " + screen.pixelDepth);
}
</script>
 
<button type="button" onclick="getPixelDepth();">Get Pixel Depth</button>