JavaScript Window Screen

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

Window Screen

window.screen The object can also be written without the "window" prefix:

Property:

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

Window Screen Width

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

Example

Displays the screen width in pixels:

document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;

The result will be:



Try It Yourself

Window Screen Height

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

Example

Displays the screen height in pixels:

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

The result will be:



Try It Yourself

Window Screen Available Width

screen.availWidth The property returns the width of the visitor's screen in pixels, minus interface features such as window toolbars.

Example

Displays the available screen width in pixels:

document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;

The result will be:



Try It Yourself

Window Screen Available Height

screen.availHeight The property returns the height of the visitor's screen in pixels, minus interface features such as window toolbars.

Example

Displays the available screen height in pixels:

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

The result will be:



Try It Yourself

Window Screen Color Depth

screen.colorDepth The property returns the number of bits used to display a color.

All modern computers use 24-bit or 32-bit hardware color resolution:

  • 24 bits = 16,777,216 different "True Colors"
  • 32 bits = 4,294,967,296 different "Deep Colors"

Older computers use 14-bit: 65,536 different "High Colors" resolutions.

Very old computers and old-style mobile phones use 8-bit: 256 different "VGA colors".

Example

Display the screen color depth in bits:

document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;

The result will be:



Try It Yourself

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

Window Screen Pixel Depth

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

Example

Display the screen pixel depth in bits:

document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;

The result will be:



Try It Yourself

For modern computers, color depth and pixel depth are equal.