JS Screen Object
In this page:
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.
Example: What Is the Screen Object?
console.log(screen.width, screen.height); // physical display resolutionScreen 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.
Example: Screen Size Properties
console.log(screen.width, screen.height); // full resolution
console.log(screen.availWidth, screen.availHeight); // minus OS taskbar/dockColor 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.
Example: 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.
Example: 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 smallerPractical 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.
Example: Practical Uses
if (screen.colorDepth >= 24) {
console.log("Load high-resolution images");
} else {
console.log("Load standard images");
}Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: