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.
