Screen Object
The Screen Object is a part of the Browser Object Model (BOM) in JavaScript. It is accessible via window.screen
(or simply screen
) and provides information about the user’s physical display, such as resolution, available space, color depth, and orientation. This object is read-only, meaning you can retrieve information about the screen but cannot change its physical properties using JavaScript.
The Screen Object is widely used for:
- Responsive design – adjusting layouts according to screen size.
- Analytics – logging display information for user behavior insights.
- Optimizations – detecting mobile vs desktop or adjusting popups and full-screen apps.
Key Properties of the Screen Object
screen.width
– Returns the total width of the user’s screen in pixels.
console.log(screen.width);
screen.height
– Returns the total height of the user’s screen in pixels.
console.log(screen.height);
screen.availWidth
– Provides the width available for the browser content, excluding system UI elements like taskbars or docks.
console.log(screen.availWidth);
screen.availHeight
– Provides the height available for browser content, excluding system UI.
console.log(screen.availHeight);
screen.colorDepth
– Shows the number of bits used to display colors on the screen, usually 24 or 32.
console.log(screen.colorDepth);
screen.pixelDepth
– Represents the number of bits per pixel for color resolution. Often the same as colorDepth
.
console.log(screen.pixelDepth);
screen.orientation
– Returns the current screen orientation (e.g., portrait-primary
, landscape-primary
).
console.log(screen.orientation.type);
screen.orientation.angle
– Returns the rotation angle of the screen in degrees (0, 90, 180, 270).
console.log(screen.orientation.angle);
Practical Examples
Display Screen Information
<h1>Screen Info</h1>
<p id="demo"></p>
<script>
const info = `
Resolution: ${screen.width}x${screen.height}<br>
Available: ${screen.availWidth}x${screen.availHeight}<br>
Color Depth: ${screen.colorDepth} bits<br>
Pixel Depth: ${screen.pixelDepth} bits
`;
document.getElementById("demo").innerHTML = info;
</script>
Responsive Design Based on Screen Width
<h1 id="title">Resize the Window</h1>
<script>
function adjustLayout() {
const title = document.getElementById("title");
if(screen.width < 768) {
title.style.fontSize = "16px";
title.textContent = "Small Screen Detected";
} else {
title.style.fontSize = "24px";
title.textContent = "Large Screen Detected";
}
}
// Run on load
adjustLayout();
// Update on window resize
window.addEventListener("resize", adjustLayout);
</script>
Detect Screen Orientation
<p id="demo">Orientation: Unknown</p>
<script>
function updateOrientation() {
const orientation = screen.orientation ? screen.orientation.type : "Not supported";
document.getElementById("demo").textContent = `Orientation: ${orientation}`;
}
updateOrientation();
screen.orientation?.addEventListener("change", updateOrientation);
</script>