• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript Screen Objects

← Previous Next →

The JavaScript Screen Object is part of the Browser Object Model (BOM) and provides information about the user’s display screen — such as width, height, color depth, and pixel depth.

This information helps developers make responsive designs, adjust layout dynamically, and even detect screen capabilities for optimization (for example, choosing the right image quality for different devices).

What is the Screen Object in JavaScript?

The screen object represents the display monitor or screen on which the browser window is being viewed.

It’s a property of the window object, meaning you can access it either as window.screen or just screen.

Example:

<script>
// Both are valid
console.log(window.screen);
console.log(screen);
</script>

Why Use the Screen Object?

The screen object helps you:

  • Detect the user’s screen size (useful for responsive designs).

  • Get information about color depth (important for image quality).

  • Understand available screen area after excluding taskbars and toolbars.

  • Make decisions based on screen resolution, like adjusting layout or image sizes.

Common Properties of the Screen Object

Here are the most frequently used properties of the screen object:

Property Description
screen.width Returns the total width (in pixels) of the user’s screen.
screen.height Returns the total height (in pixels) of the screen.
screen.availWidth Returns the width of the screen available to the browser (excluding OS taskbars).
screen.availHeight Returns the height of the available screen area (excluding the taskbar).
screen.colorDepth Returns the number of bits used to display one color (usually 24).
screen.pixelDepth Returns the color resolution of the screen in bits per pixel (often the same as colorDepth).

Example: Displaying Screen Information

Here’s a simple example that displays all screen details on the webpage.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Screen Object Example</h2>
<p id="info"></p>

<script>
// Get screen information
let info = `
  Screen Width: ${screen.width}px <br>
  Screen Height: ${screen.height}px <br>
  Available Width: ${screen.availWidth}px <br>
  Available Height: ${screen.availHeight}px <br>
  Color Depth: ${screen.colorDepth} bits <br>
  Pixel Depth: ${screen.pixelDepth} bits
`;

// Display on the page
document.getElementById("info").innerHTML = info;
</script>
</body>
</html>

Explanation:

  • screen.width and screen.height give the full resolution.

  • availWidth and availHeight exclude OS UI areas (like taskbars).

  • colorDepth tells how many bits represent a single pixel’s color (e.g., 24 bits = true color).

Difference Between width/height and availWidth/availHeight

Property Includes Taskbar? Example Use
screen.width, screen.height ✅ Yes For total display resolution
screen.availWidth, screen.availHeight ❌ No For browser window space available

This distinction is helpful when you want to create popups or responsive layouts that fit perfectly in the user’s visible area.

Practical Example: Responsive Alert Based on Screen Size

You can use screen.width to adjust your UI or behavior for different devices.

<script>
// Detect screen width and show a message
if (screen.width < 600) {
  alert("You are using a mobile device!");
} else if (screen.width < 1200) {
  alert("You are on a tablet or small laptop.");
} else {
  alert("You are on a desktop screen.");
}
</script>

Explanation:
This helps you understand what type of device the user might be on, allowing you to optimize your layout or functionality.

Example: Opening a Popup Centered on the Screen

You can use screen dimensions to open a new popup exactly in the center of the user’s screen.

<script>
// Function to open a centered popup
function openCenteredPopup() {
  const popupWidth = 400;
  const popupHeight = 300;

  // Calculate center position
  const left = (screen.width - popupWidth) / 2;
  const top = (screen.height - popupHeight) / 2;

  // Open the popup
  window.open(
    "https://www.example.com",
    "_blank",
    `width=${popupWidth},height=${popupHeight},left=${left},top=${top}`
  );
}
</script>

<button onclick="openCenteredPopup()">Open Centered Popup</button>

Explanation:

  • The code calculates the left and top positions using screen dimensions.

  • window.open() then opens the new window perfectly centered.

Understanding Color Depth and Pixel Depth

Both colorDepth and pixelDepth describe how many bits represent color per pixel.

For most modern devices:

  • colorDepth = 24 bits → True color (16 million colors)

  • pixelDepth = 24 bits → Usually the same as color depth

<script>
document.write("Color Depth: " + screen.colorDepth + " bits<br>");
document.write("Pixel Depth: " + screen.pixelDepth + " bits");
</script>

These properties are mostly informational now, as modern screens almost always support 24-bit color.

Use Case: Detecting Display Type

You can use the screen object to check if the user is using a low-resolution display and adjust the website’s visuals accordingly.

<script>
if (screen.width < 1024 || screen.colorDepth < 24) {
  document.body.style.backgroundColor = "#fdd";
  document.write("Low-resolution or limited color display detected.");
}
</script>

The Screen Object in Window Context

Remember, screen is actually a property of the global window object.

So these are equivalent:

console.log(screen.width);
console.log(window.screen.width);

That means all BOM-related objects like location, history, navigator, and screen are accessible under window.

Limitations of the Screen Object

  1. It doesn’t give the browser window size — use window.innerWidth for that.

  2. You can’t control or resize the user’s screen (for security reasons).

  3. The values might differ slightly across devices and browsers.

  4. It only provides read-only information.

Summary of the Tutorial

The JavaScript Screen Object gives you important details about the user’s screen — width, height, available space, and color capabilities.

You can use it to:

  • Detect device type (mobile, tablet, desktop)

  • Adjust layouts or popup positioning

  • Monitor screen resolutions for analytics

  • Optimize content for color and display features

Practice Questions

  1. How can you display the total width and height of the user’s screen using the screen object?

  2. Write code to display the available screen width and height (excluding taskbars) on the webpage.

  3. How can you use the screen object to check if a user is on a mobile device (screen width < 600px)?

  4. Write a script to alert the user if their screen color depth is less than 24 bits.

  5. How can you access the screen’s pixel depth and display it in a <p> element?

  6. Write code to open a popup window centered on the user’s screen using screen.width and screen.height.

  7. How can you log all properties of the screen object to the console for debugging purposes?

  8. Write a program to change the background color of the page if the available screen width is smaller than 1024 pixels.

  9. How can you compare screen.width and window.innerWidth to detect the difference between full screen and browser viewport?

  10. Create a function that checks if the user’s screen resolution is high definition (width ≥ 1920 and height ≥ 1080) and displays a corresponding message.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top