JS Screen Object

What Is the Screen Object?

window.screen exposes information about the user's physical display device, independent of how large the browser window currently is. It's a read-only source of hardware/display facts, not something you configure.

उदाहरण: What Is the Screen Object?

console.log(screen.width, screen.height); // physical display resolution

Screen Size Properties

screen.width and screen.height report the full resolution of the display in pixels, while screen.availWidth and screen.availHeight subtract space taken by OS elements like the taskbar or dock.

The available values are usually the more useful ones for layout decisions.

उदाहरण: Screen Size Properties

console.log(screen.width, screen.height); // full resolution
console.log(screen.availWidth, screen.availHeight); // minus OS taskbar/dock

Color and Pixel Depth

screen.colorDepth and screen.pixelDepth report how many bits are used to represent color per pixel, almost always 24 or 30 on modern hardware.

This is rarely used today but matters for specialized graphics or accessibility tooling checking display capability.

उदाहरण: Color and Pixel Depth

console.log(screen.colorDepth, screen.pixelDepth);

Screen vs Window Dimensions

It's a common mix-up: screen.width is the monitor's total resolution, while window.innerWidth is the browser viewport size, which is almost always smaller.

Confusing the two leads to layout code that behaves correctly on a maximized window but breaks the moment the user resizes it.

उदाहरण: Screen vs Window Dimensions

console.log("Screen:", screen.width, "x", screen.height); // monitor resolution
console.log("Window:", window.innerWidth, "x", window.innerHeight); // browser viewport, usually smaller

Practical Uses

Screen properties are mostly used for adaptive experiences that care about the physical display, like choosing a higher-resolution image set for a high colorDepth screen, opening a popup sized relative to available screen space, or basic analytics about visitor display sizes.

उदाहरण: Practical Uses

// Check whether `screen.colorDepth >= 24`
// Check whether `screen.colorDepth >= 24`
if (screen.colorDepth >= 24) {
  // Print "Load high-resolution images" to the console
  // Print "Load high-resolution images" to the console
  console.log("Load high-resolution images");
// Otherwise, run this branch
// Otherwise, run this branch
} else {
  // Print "Load standard images" to the console
  // Print "Load standard images" to the console
  console.log("Load standard images");
}