JavaScript Screen Object Properties

The javascript screen object holds information of browser screen. This blog covers all important javascript screen object properties with example. The screen object is special object for inspecting properties of the screen on which the current window is being rendered. There are many properies available on this object that can be used to determine and set some properies of the client's screen.

So let's get started,

🔷 AVAILHEIGHT

The availHeight property returns the height of the user's screen, in pixels, minus interface features like the Windows Taskbar.

var x = "Available Height : " + screen.availHeight;
console.log(x);

// output
// Available Height: 768

🔷 COLORDEPTH

The colorDepth property returns the bit depth of the color palette for displaying images (in bits per pixel).

var x = "Color Depth: " + screen.colorDepth + " bits per pixel";
console.log(x);

// output
// Color Depth: 24 bits per pixel

🔷 PIXELDEPTH

The pixelDepth property returns the color resolution (in bits pixel) of the visitor's screen.

var x = "Color resolution: " + screen.pixelDepth + " bits per pixel";
console.log(x);

// output
// Color resolution: 24 bits per pixel

🔷 AVAILWIDTH

The availWidth property returns the width of the user's screen, in pixels, minus interface features like Windows Taskbar.

var x = "Available Width: " + screen.availWidth;
console.log(x);

// output
// Color Width: 1024

🔷 HEIGHT

The height property returns the total height of the user's screen, in pixels.

var x = "Total Height: " + screen.height + "px";
console.log(x);

// output
// Total Height: 1050px

🔷 WIDTH

The width property returns the total width of the user's screen, in pixels.

var x = "Total Width: " + screen.width + "px";
console.log(x);

// output
// Total Width: 1680px

Hope you liked this!

Let's Get Connected 🤝:)