JavaScript Screen

🖥️ What is the Screen Object?

The Screen object contains information about the user's screen/monitor. It helps you understand the display capabilities and create responsive designs.


// Get screen information
console.log("Screen width: " + screen.width);
console.log("Screen height: " + screen.height);
console.log("Available width: " + screen.availWidth);
console.log("Available height: " + screen.availHeight);

Your Screen Info:

Click the button to see your screen information

Screen Properties

📐

Screen Size

Total screen dimensions

screen.width    // Total width
screen.height   // Total height

📱

Available Size

Screen minus taskbar/dock

screen.availWidth   // Available width
screen.availHeight  // Available height

🎨

Color Depth

Screen color information

screen.colorDepth   // Bits per pixel
screen.pixelDepth   // Pixel depth

🔄

Orientation

Screen orientation info

screen.orientation.angle  // Rotation
screen.orientation.type   // Portrait/landscape

🔹 Screen Detection Examples

Use screen properties to create adaptive experiences:

// Check if screen is small (mobile)
if (screen.width < 768) {
    console.log("Small screen detected");
    document.body.style.fontSize = "14px";
} else {
    console.log("Large screen detected");
    document.body.style.fontSize = "16px";
}

// Check screen resolution
if (screen.width >= 1920 && screen.height >= 1080) {
    console.log("High resolution screen (Full HD or better)");
} else {
    console.log("Standard resolution screen");
}

// Display all screen information
function displayScreenInfo() {
    return {
        width: screen.width,
        height: screen.height,
        availableWidth: screen.availWidth,
        availableHeight: screen.availHeight,
        colorDepth: screen.colorDepth,
        pixelDepth: screen.pixelDepth
    };
}

Try this:

🔹 Responsive Design with Screen

Create responsive layouts based on screen properties:

// Responsive layout function
function setResponsiveLayout() {
    const screenWidth = screen.width;
    const body = document.body;
    
    if (screenWidth <= 480) {
        // Mobile phones
        body.className = "mobile-layout";
        console.log("Mobile layout applied");
    } else if (screenWidth <= 768) {
        // Tablets
        body.className = "tablet-layout";
        console.log("Tablet layout applied");
    } else if (screenWidth <= 1024) {
        // Small laptops
        body.className = "laptop-layout";
        console.log("Laptop layout applied");
    } else {
        // Desktop
        body.className = "desktop-layout";
        console.log("Desktop layout applied");
    }
}

// Apply layout on page load
window.onload = setResponsiveLayout;

🔹 Screen vs Window Differences

Understanding the difference between screen and window properties:

Screen Object:

screen.width/height: Total monitor size
screen.availWidth/availHeight: Monitor minus taskbar
Fixed values: Don't change when browser resizes

Window Object:

window.innerWidth/innerHeight: Browser window size
window.outerWidth/outerHeight: Browser including toolbars
Dynamic values: Change when browser resizes

// Compare screen vs window
function compareScreenWindow() {
    console.log("=== SCREEN (Monitor) ===");
    console.log("Total size: " + screen.width + "x" + screen.height);
    console.log("Available: " + screen.availWidth + "x" + screen.availHeight);
    
    console.log("=== WINDOW (Browser) ===");
    console.log("Inner size: " + window.innerWidth + "x" + window.innerHeight);
    console.log("Outer size: " + window.outerWidth + "x" + window.outerHeight);
}

compareScreenWindow();