15.2 JS Screen

Window Screen Width

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

Example 1: JS Screen - Window Screen Width

Display the width of the screen in pixels:

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

Result will be:

Screen Width: 1920

Window Screen Height

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

Example 2: JS Screen - Window Screen Height

Display the height of the screen in pixels:

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

Result will be:

Screen Height: 1080

Window Screen Available Width

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

Example 3: JS Screen - Window Screen Available Width

Display the available width of the screen in pixels:

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

Result will be:

Available Screen Width: 1920

Window Screen Available Height

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

Example 4: JS Screen - Window Screen Available Height

Display the available height of the screen in pixels:

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

Result will be:

Available Screen Height: 1040

Window Screen Color Depth

• The screen.colorDepth property returns the number of bits used to display one color.
• All modern computers use 24 bit or 32 bit hardware for color resolution:
  • 24 bits = 16,777,216 different "True Colors"
  • 32 bits = 4,294,967,296 different "Deep Colors"
• Older computers used 16 bits: 65,536 different "High Colors" resolution.
• Very old computers, and old cell phones used 8 bits: 256 different "VGA colors".

Example 5: JS Window Screen - Color Depth

Display the color depth of the screen in bits:

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

Result will be:

Screen Color Depth: 24

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

Window Screen Pixel Depth

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

Example 6: JS Window Screen - Pixel Depth

Display the pixel depth of the screen in bits:

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

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