JavaScript Screen Object

The screen object is a read-only JavaScript object that provides information about the device’s screen, such as its resolution, available space, and color depth.

It’s helpful when you want your webpage to respond to different screen sizes or adjust visuals based on the user’s device display.

What Is the Screen Object?

Unlike the window or document objects that deal with the browser or web page, the screen object deals with the entire screen of the device running the browser.

Screen Width and Height

You can get the full screen resolution using .width and .height:

				
					console.log(`Full Screen: ${screen.width} x ${screen.height}`);

Useful for scaling layouts or setting canvas dimensions dynamically.

Available Width and Height

Use availWidth and availHeight to get the visible screen space available to the browser (excluding system UI like taskbars):

				
					console.log(`Available Space: ${screen.availWidth} x ${screen.availHeight}`);

This is more accurate for positioning full-screen dialogs or popups.

Color Depth

Use screen.colorDepth to check how many bits are used to represent colors on the screen:

				
					console.log(`Color Depth: ${screen.colorDepth} bits`);

Common values: 24 or 32

Useful for deciding image or video quality on high/low-color displays

Practical Use Example

				
					if (screen.width < 768) {
  console.log("Small screen detected: Switching to mobile layout.");
} else {
  console.log("Desktop screen detected: Full layout active.");
}

This is helpful for adding custom breakpoints beyond standard CSS media queries.

Important Notes

The screen object does not reflect browser window size — use window.innerWidth for that.
Some properties like availWidth may vary depending on operating system UI.
The screen object is read-only — you can’t change the screen size from JavaScript.

Conclusion

The JavaScript screen object is a simple but powerful tool to understand the user’s screen dimensions and capabilities. It helps developers build more responsive, screen-aware, and visually adaptive web experiences.

Use it alongside CSS media queries for maximum flexibility in layout control.