JavaScript Introduction | Browser Object Model | Screen Object

Screen Object

The screen object stores various information about the user’s display screen.

User’s Screen Size

The width and height properties of the screen object return the size of the user’s display screen in pixels.

document.write("The width of the current user's display screen is " + screen.width + " pixels.<br>");
document.write("The height of the current user's display screen is " + screen.height + " pixels.<br>");
 
document.write("The width of the current browser window is " + window.outerWidth + " pixels.<br>");
document.write("The height of the current browser window is " + window.outerHeight + " pixels.<br>");

screen.width and screen.height return the size of the user’s current monitor screen. However, window.outerWidth and window.outerHeight return the size of the current browser window.

Actual Available Screen Size

The availWidth and availHeight properties of the screen object return the size of the screen that can actually be used, in pixels. These properties return the size after excluding areas such as the operating system’s taskbar.

document.write("The width of the screen that can actually be used is " + screen.availWidth + " pixels.<br>");
document.write("The height of the screen that can actually be used is " + screen.availHeight + " pixels.");

Number of Bits Available per Color

The colorDepth property of the screen object returns the number of bits available per color on the user’s screen. Most computers use 24-bit true color or 30/36/48-bit deep color.

var bitColorDepth = screen.colorDepth;
document.write("The number of bits available per color on the user's screen is " + bitColorDepth + ".<br>");
document.write("That is, one color can be represented in " + Math.pow(2, bitColorDepth) + " ways.");

In true color, the number of bits available per color is 224 = 16,777,216.

Number of Bits Displayable per Screen Pixel

The pixelDepth property of the screen object returns the number of bits that can be displayed per pixel on the user’s screen.

var bitPixelDepth = screen.pixelDepth;
document.write("The number of bits displayable per pixel on the user's screen is " + bitPixelDepth + ".<br>");

On most computers, colorDepth and pixelDepth have the same value.