JavaScript Screen Object: Screen Size and Available Display Area
The window.screen object describes the physical screen associated with the current browser window. Its common read-only properties include the full screen size, the area available to browser windows, and reported color depth.
screen.width
screen.height
screen.availWidth
screen.availHeightThe values are reported in CSS pixels. The available width or height can be smaller than the full screen because operating-system interface areas may reserve space.
Live screen details Top ↑
Common Screen properties Top ↑
screen.widthandscreen.height: full screen dimensions in CSS pixels.screen.availWidthandscreen.availHeight: space available to browser windows after areas reserved by the operating system are considered.screen.colorDepth: reported color depth.screen.pixelDepth: reported bit depth. Modern browsers commonly report compatibility-oriented values such as 24.
The original page used document.writeln() to print these properties. The same six values are preserved above, but normal DOM methods are now used so the example does not teach document.write() as routine page output.
Complete working source Top ↑
The full page source is preserved as a copyable example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Screen object demo</title>
</head>
<body>
<h1>Screen details</h1>
<dl id="screenDetails"></dl>
<script>
const values = [
["width", screen.width],
["height", screen.height],
["availWidth", screen.availWidth],
["availHeight", screen.availHeight],
["pixelDepth", screen.pixelDepth],
["colorDepth", screen.colorDepth]
];
const output = document.getElementById("screenDetails");
values.forEach(([label, value]) => {
const term = document.createElement("dt");
const detail = document.createElement("dd");
term.textContent = label;
detail.textContent = value;
output.append(term, detail);
});
</script>
</body>
</html>Practical limitations Top ↑
Screen dimensions describe the display, not the browser viewport. For responsive page layout, CSS media/container queries and viewport dimensions are usually more relevant than screen.width. Do not use screen size as a reliable way to identify a device model.
Window Object Bookmark a page Redirect Page
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
