JavaScript Window Screen

The window.screen object contains information about the user's screen.

Window Screen

The window.screen object can be accessed without the window prefix.

Properties:

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

Window Screen Width

The screen.width property returns the width of the visitor's screen in pixels.

Example:

Display the width of the screen in pixels:document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;‍Result:Screen Width: 1440

‍

Window Screen Height

The screen.height property returns the height of the visitor's screen in pixels.

Example:

Display the height of the screen in pixels:document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;‍Result:Screen Height: 900

‍

Window Screen Available Width

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

Example:

Display the available width of the screen in pixels:document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;‍Result:Available Screen Width: 1440

‍

Window Screen Available Height

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

Example:

Display the available height of the screen in pixels:

document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;

‍

Result:

Available Screen Height: 900

‍

Window Screen Color Depth

The screen.colorDepth property returns the number of bits used to display one color. Modern computers typically use 24-bit or 32-bit color resolution.

• 24 bits: 16,777,216 "True Colors"
• 32 bits: 4,294,967,296 "Deep Colors"
• 16 bits: 65,536 "High Colors" (older computers)
• 8 bits: 256 "VGA colors" (very old computers and cell phones)

Example:

Display the color depth of the screen in bits:document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;‍Result:Screen Color Depth: 30

‍

The #rrggbb (RGB) values used in HTML represent "True Colors" (16,777,216 different colors).

Window Screen Pixel Depth

The screen.pixelDepth property returns the pixel depth of the screen.

Example:

Display the pixel depth of the screen in bits:document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;‍Result:Screen Pixel Depth: 30

‍

For modern computers, Color Depth and Pixel Depth are equal.

‍