JS 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 color depth, pixel depth, the resolution which is the width and height of the screen, etc.

Properties of the window.screen object can be accessed without specifying the window since the window object is at the peak of the scope chain. Prefix, for instance, window.screen.width can as well be written as screen.width. The following section will show you how to use the screen object property of the window to get information on the user's display.

Getting Width and Height of the Screen

The width and height of the user's screen can be obtained in pixels using the screen.width and screen.height property. Follow this example to display your screen resolution on the button click:

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

Try with example

Getting Available Width and Height of the Screen

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

The screen's available width and height are the equivalents of the screen's actual width and height, subtracting the 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>

Try with example

Getting Screen Color Depth

The screen.colorDepth property can be used to get the color depth of the user's screen, which is the number of bits used to represent the color of a single pixel. It indicates the number of colors a device screen can produce. For instance, a screen with a color depth of 8 is capable of producing 256 colors (28).

Currently, most devices have a screen with a color depth of 24 or 32. Hence, more bits produce more color variations. For instance, 24 bits can produce 224 = 16,777,216 color variations known as true colors, while 32 bits can produce 232 = 4,294,967,296 color variations termed deep colors.

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

Try with example

Tip: Currently, every computer and phone display uses 24-bit color depth. 24 bits mostly always use 8 bits of each of R, G, B. While 32-bit color depth uses 24 bits for the color and uses the remaining 8 bits for transparency.

Getting Screen Pixel Depth

The pixel depth of the screen which is the number of bits used per pixel by the system display hardware can be derived using the screen.pixelDepth property. 

Color depth and pixel depth are equal in modern devices. 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>

Try with example