The window.screen object contains information about the user's screen dimensions and color depth. Unlike the window's viewport (which is the area inside the browser), the screen object refers to the entire physical monitor or display device the visitor is using.
Here are the actual dimensions of your current display detected by JavaScript:
The width and height properties return the total width and height of the visitor's screen in pixels.
// Get total screen dimensions
let width = screen.width;
let height = screen.height;
console.log("Screen Width: " + width);
console.log("Screen Height: " + height);The availWidth and availHeight properties return the width and height of the visitor's screen, minus interface features like the Windows Taskbar or MacOS Menu Bar.
// Get available screen space
let availWidth = screen.availWidth;
let availHeight = screen.availHeight;
console.log("Available Width: " + availWidth);
console.log("Available Height: " + availHeight);availHeight if you want to know the maximum space your application can occupy without being covered by system bars.
The screen object also provides information about the color resolution of the display.
document.write("Color Depth: " + screen.colorDepth);
document.write("Pixel Depth: " + screen.pixelDepth);| Property | Description |
|---|---|
screen.width |
Total width of the visitor's screen |
screen.height |
Total height of the visitor's screen |
screen.availWidth |
Available width (minus taskbars) |
screen.availHeight |
Available height (minus taskbars) |
screen.colorDepth |
Number of bits to display one color |
screen.pixelDepth |
The pixel depth of the screen |
window.screen.