Measuring the Physical Display

The Screen Object (window.screen) contains information about the visitor's physical screen (the actual monitor or mobile display they are looking at).

Do not confuse this with window.innerWidth (which is the size of the browser window). The screen object measures the entire physical monitor, regardless of whether the browser is fullscreen or minimized to a tiny box.

Useful Screen Properties

1. screen.width and screen.height Returns the total width and height of the visitor's screen in pixels.

console.log("Monitor Width: " + screen.width);
console.log("Monitor Height: " + screen.height);

2. screen.availWidth and screen.availHeight Returns the available width and height of the screen, excluding interface features like the Windows Taskbar or Mac Dock.

console.log("Available Height: " + screen.availHeight);

3. screen.colorDepth Returns the number of bits used to display one color (usually 24 or 32 on modern screens).

console.log("Color Depth: " + screen.colorDepth);

When is this useful?

In modern responsive web design, you almost never use the screen object. Instead, you use CSS Media Queries to adapt your layout to the browser's viewport. The screen object is mostly used by analytics platforms (like Google Analytics) to track hardware statistics of website visitors.

💡 Himanshu's Tip:

If you are trying to make your website responsive (e.g., changing a layout for mobile phones), do NOT use the Screen object in JavaScript! Always use CSS @media queries for responsive design. It is much faster and standard practice.

Interview Questions

1. What is the difference between window.innerWidth and screen.width?
2. What does screen.availHeight measure that screen.height does not?
3. Why shouldn't you use the screen object to build responsive mobile layouts?