JavaScript Window Screen Object. Here’s What You Need To Know

Previously we checked JavaScript window object and in this tutorial you will learn about JavaScript window screen object.

What Is The Screen Object In JavaScript

Simply the window.screen is an object that contains information about the user’s screen for example resolution, color depth, pixel depth etc.

Window object is at the top of the scope chain, so properties of the window.screen object can be accessed without specifying the window. For example instead of window.screen.width you can simply use screen.width. The following section will explore how to get information of the user’s display using the screen object.

How To Get Width And Height Of The Screen Using JavaScript

For this you can use the screen.width and screen.height properties that obtains the width and height of the user’s screen in pixels. Here’s an example:

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

How To Get Available Width And Height Of The Screen Using JavaScript

For this you need to use screen.availWidth and screen.availHeight properties that will get the width and height available to the browser 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>

How To Get Screen Color Depth Using JavaScript

If you want to get the color depth of the user’s screen, you can use the screen.colorDepth property. 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⁸). Here’s an example:

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

How To Get Screen Pixel Depth Using JavaScript

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. Keep in mind that 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>