Let's explore the Window Screen object with comprehensive examples covering all screen properties!

Understanding Window Screen Object

The window.screen object contains information about the user's screen, including dimensions, color depth, and pixel density.

Example 1: Comprehensive Screen Properties Display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window Screen Properties</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
            padding: 20px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .demo-container {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            margin: 20px 0;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        .properties-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .property-card {
            background: linear-gradient(145deg, #f8f9fa, #e9ecef);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid #dee2e6;
            position: relative;
            overflow: hidden;
        }

        .property-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s;
        }

        .property-card:hover::before {
            left: 100%;
        }

        .property-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .property-icon {
            font-size: 3em;
            margin-bottom: 15px;
            color: #3498db;
        }

        .property-name {
            font-size: 1.1em;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .property-value {
            font-size: 1.8em;
            font-weight: bold;
            color: #e74c3c;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
        }

        .property-description {
            color: #6c757d;
            font-size: 0.9em;
            line-height: 1.4;
        }

        .visualization {
            background: #2c3e50;
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin: 30px 0;
            position: relative;
        }

        .screen-visual {
            background: #34495e;
            border: 3px solid #3498db;
            margin: 20px auto;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        .available-screen {
            background: #2ecc71;
            border: 2px solid #27ae60;
            position: absolute;
            top: 20px;
            left: 20px;
            border-radius: 5px;
        }

        .dimension-label {
            position: absolute;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: bold;
            z-index: 10;
        }

        .controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 25px 0;
        }

        button {
            padding: 15px 25px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
            background: linear-gradient(135deg, #2980b9, #2573a7);
        }

        .info-panel {
            background: #ecf0f1;
            padding: 25px;
            border-radius: 15px;
            margin: 25px 0;
            border-left: 5px solid #3498db;
        }

        .code-block {
            background: #1a1a1a;
            color: #00ff00;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            line-height: 1.5;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .comparison-table th {
            background: #3498db;
            color: white;
            padding: 15px;
            text-align: left;
        }

        .comparison-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #dee2e6;
        }

        .comparison-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .comparison-table tr:hover {
            background: #e3f2fd;
        }

        .live-update {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #2ecc71;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            display: none;
            z-index: 1000;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="live-update" id="liveUpdate">Screen Updated!</div>

    <div class="container">
        <div class="header">
            <h1>JavaScript Window Screen Properties</h1>
            <p>Complete guide to accessing and utilizing screen information</p>
        </div>

        <div class="demo-container">
            <h2>Screen Properties Overview</h2>

            <div class="properties-grid">
                <div class="property-card">
                    <div class="property-icon">📱</div>
                    <div class="property-name">Screen Width & Height</div>
                    <div class="property-value" id="screenSize">-</div>
                    <div class="property-description">
                        Total physical screen dimensions in pixels.
                        <code>screen.width × screen.height</code>
                    </div>
                </div>

                <div class="property-card">
                    <div class="property-icon">🖥️</div>
                    <div class="property-name">Available Screen</div>
                    <div class="property-value" id="availScreen">-</div>
                    <div class="property-description">
                        Screen space available for applications (excluding OS UI).
                        <code>screen.availWidth × screen.availHeight</code>
                    </div>
                </div>

                <div class="property-card">
                    <div class="property-icon">🎨</div>
                    <div class="property-name">Color Depth</div>
                    <div class="property-value" id="colorDepth">-</div>
                    <div class="property-description">
                        Number of bits used to represent colors.
                        <code>screen.colorDepth</code>
                    </div>
                </div>

                <div class="property-card">
                    <div class="property-icon">🖼️</div>
                    <div class="property-name">Pixel Depth</div>
                    <div class="property-value" id="pixelDepth">-</div>
                    <div class="property-description">
                        Bits per pixel of the screen.
                        <code>screen.pixelDepth</code>
                    </div>
                </div>

                <div class="property-card">
                    <div class="property-icon">📐</div>
                    <div class="property-name">Device Pixel Ratio</div>
                    <div class="property-value" id="pixelRatio">-</div>
                    <div class="property-description">
                        Ratio of physical to CSS pixels.
                        <code>window.devicePixelRatio</code>
                    </div>
                </div>

                <div class="property-card">
                    <div class="property-icon">🔄</div>
                    <div class="property-name">Orientation</div>
                    <div class="property-value" id="orientation">-</div>
                    <div class="property-description">
                        Current screen orientation.
                        <code>screen.orientation.type</code>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-container">
            <h2>Screen Visualization</h2>

            <div class="visualization">
                <h3 style="color: #ecf0f1; text-align: center; margin-bottom: 20px;">
                    Physical Screen vs Available Space
                </h3>

                <div class="screen-visual" id="screenVisual" style="width: 100%; height: 300px;">
                    <div class="dimension-label" style="top: -30px; left: 50%; transform: translateX(-50%);">
                        Total Screen: <span id="totalScreenLabel">-</span>
                    </div>

                    <div class="available-screen" id="availableVisual" style="width: 90%; height: 260px;">
                        <div class="dimension-label" style="bottom: -30px; left: 50%; transform: translateX(-50%);">
                            Available: <span id="availableScreenLabel">-</span>
                        </div>

                        <div class="dimension-label" style="top: 10px; right: 10px;">
                            Taskbar/UI Space
                        </div>
                    </div>
                </div>
            </div>

            <div class="controls">
                <button onclick="updateScreenInfo()">Refresh Screen Info</button>
                <button onclick="showScreenDetails()">Show Detailed Info</button>
                <button onclick="simulateDifferentScreens()">Simulate Different Screens</button>
                <button onclick="checkColorSupport()">Check Color Support</button>
                <button onclick="copyScreenInfo()">Copy Screen Info</button>
            </div>
        </div>

        <div class="demo-container">
            <h2>Technical Details & Code Examples</h2>

            <div class="info-panel">
                <h3>Understanding Screen Properties</h3>
                <p><strong>screen.width/height:</strong> The total physical dimensions of the user's screen in pixels.</p>
                <p><strong>screen.availWidth/availHeight:</strong> The screen dimensions available for your web application (excluding operating system interfaces like taskbars).</p>
                <p><strong>screen.colorDepth:</strong> The number of bits used to represent the color of a single pixel.</p>
                <p><strong>screen.pixelDepth:</strong> The color resolution in bits per pixel (usually same as colorDepth).</p>
            </div>

            <div class="code-block">
// Accessing Screen Properties<br>
const screenInfo = {<br>
  width: screen.width,<br>
  height: screen.height,<br>
  availWidth: screen.availWidth,<br>
  availHeight: screen.availHeight,<br>
  colorDepth: screen.colorDepth,<br>
  pixelDepth: screen.pixelDepth,<br>
  pixelRatio: window.devicePixelRatio<br>
};<br>
<br>
// Practical Usage Examples<br>
if (screen.availWidth < 768) {<br>
  // Load mobile-optimized layout<br>
  loadMobileLayout();<br>
}<br>
<br>
if (screen.colorDepth < 24) {<br>
  // Use limited color palette<br>
  useBasicColors();<br>
}<br>
<br>
// High-DPI screen detection<br>
if (window.devicePixelRatio > 1) {<br>
  // Load high-resolution images<br>
  loadRetinaImages();<br>
}
            </div>

            <div class="comparison-table">
                <table>
                    <thead>
                        <tr>
                            <th>Property</th>
                            <th>Description</th>
                            <th>Typical Values</th>
                            <th>Use Case</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>screen.width</code></td>
                            <td>Total screen width in pixels</td>
                            <td>1920, 1366, 1440, etc.</td>
                            <td>Responsive design planning</td>
                        </tr>
                        <tr>
                            <td><code>screen.height</code></td>
                            <td>Total screen height in pixels</td>
                            <td>1080, 768, 900, etc.</td>
                            <td>Full-screen applications</td>
                        </tr>
                        <tr>
                            <td><code>screen.availWidth</code></td>
                            <td>Available screen width</td>
                            <td>~1920 (minus taskbar)</td>
                            <td>Window sizing</td>
                        </tr>
                        <tr>
                            <td><code>screen.availHeight</code></td>
                            <td>Available screen height</td>
                            <td>~1040 (minus taskbar)</td>
                            <td>Popup positioning</td>
                        </tr>
                        <tr>
                            <td><code>screen.colorDepth</code></td>
                            <td>Color bit depth</td>
                            <td>24, 30, 32</td>
                            <td>Image optimization</td>
                        </tr>
                        <tr>
                            <td><code>screen.pixelDepth</code></td>
                            <td>Bits per pixel</td>
                            <td>24, 30, 32</td>
                            <td>Graphics optimization</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // Update all screen information
        function updateScreenInfo() {
            // Basic screen properties
            document.getElementById('screenSize').textContent = 
                `${screen.width} × ${screen.height}`;

            document.getElementById('availScreen').textContent = 
                `${screen.availWidth} × ${screen.availHeight}`;

            document.getElementById('colorDepth').textContent = 
                `${screen.colorDepth} bit`;

            document.getElementById('pixelDepth').textContent = 
                `${screen.pixelDepth} bit`;

            document.getElementById('pixelRatio').textContent = 
                window.devicePixelRatio;

            // Orientation
            const orientation = screen.orientation || {};
            document.getElementById('orientation').textContent = 
                orientation.type ? orientation.type.replace('-', ' ').toUpperCase() : 'Not Available';

            // Update visualization
            updateVisualization();

            // Show update notification
            showLiveUpdate();

            // Add pulse animation to updated cards
            document.querySelectorAll('.property-card').forEach(card => {
                card.classList.add('pulse');
                setTimeout(() => card.classList.remove('pulse'), 500);
            });
        }

        function updateVisualization() {
            const screenVisual = document.getElementById('screenVisual');
            const availableVisual = document.getElementById('availableVisual');

            // Update labels
            document.getElementById('totalScreenLabel').textContent = 
                `${screen.width} × ${screen.height}`;

            document.getElementById('availableScreenLabel').textContent = 
                `${screen.availWidth} × ${screen.availHeight}`;

            // Calculate visualization proportions
            const totalWidth = screen.width;
            const totalHeight = screen.height;
            const availWidth = screen.availWidth;
            const availHeight = screen.availHeight;

            // Update available screen visualization size
            const availWidthPercent = (availWidth / totalWidth) * 90;
            const availHeightPercent = (availHeight / totalHeight) * 86;

            availableVisual.style.width = `${availWidthPercent}%`;
            availableVisual.style.height = `${availHeightPercent}%`;
        }

        function showScreenDetails() {
            const details = `
Screen Detailed Information:

Total Dimensions: ${screen.width} × ${screen.height} pixels
Available Space: ${screen.availWidth} × ${screen.availHeight} pixels
Color Depth: ${screen.colorDepth} bits
Pixel Depth: ${screen.pixelDepth} bits
Device Pixel Ratio: ${window.devicePixelRatio}
Orientation: ${screen.orientation?.type || 'Not available'}

UI Space Occupied:
- Width: ${screen.width - screen.availWidth} pixels
- Height: ${screen.height - screen.availHeight} pixels

Screen Aspect Ratio: ${calculateAspectRatio(screen.width, screen.height)}
            `;

            alert(details);
        }

        function calculateAspectRatio(width, height) {
            const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
            const divisor = gcd(width, height);
            return `${width/divisor}:${height/divisor}`;
        }

        function simulateDifferentScreens() {
            const screens = [
                { name: "HD Desktop", width: 1920, height: 1080, ratio: 1 },
                { name: "4K Desktop", width: 3840, height: 2160, ratio: 2 },
                { name: "Laptop", width: 1366, height: 768, ratio: 1 },
                { name: "Tablet", width: 1024, height: 768, ratio: 2 },
                { name: "Mobile", width: 375, height: 667, ratio: 3 }
            ];

            const randomScreen = screens[Math.floor(Math.random() * screens.length)];

            // Simulate by updating the display (not actually changing screen)
            document.getElementById('screenSize').textContent = 
                `${randomScreen.width} × ${randomScreen.height}`;
            document.getElementById('pixelRatio').textContent = randomScreen.ratio;

            showLiveUpdate(`Simulated: ${randomScreen.name}`);
        }

        function checkColorSupport() {
            const colorDepth = screen.colorDepth;
            let message = '';

            if (colorDepth >= 30) {
                message = `Excellent color support (${colorDepth}-bit) - Deep Color capable`;
            } else if (colorDepth >= 24) {
                message = `Good color support (${colorDepth}-bit) - True Color`;
            } else if (colorDepth >= 16) {
                message = `Basic color support (${colorDepth}-bit) - High Color`;
            } else {
                message = `Limited color support (${colorDepth}-bit)`;
            }

            alert(`Color Support Analysis:\n\n${message}`);
        }

        function copyScreenInfo() {
            const screenInfo = `
Screen Information:
• Total Size: ${screen.width} × ${screen.height}
• Available: ${screen.availWidth} × ${screen.availHeight}
• Color Depth: ${screen.colorDepth}-bit
• Pixel Depth: ${screen.pixelDepth}-bit
• Pixel Ratio: ${window.devicePixelRatio}
• Orientation: ${screen.orientation?.type || 'N/A'}
            `.trim();

            navigator.clipboard.writeText(screenInfo).then(() => {
                showLiveUpdate('Screen info copied to clipboard!');
            }).catch(() => {
                alert('Screen Information:\n' + screenInfo);
            });
        }

        function showLiveUpdate(message = 'Screen Updated!') {
            const updateElement = document.getElementById('liveUpdate');
            updateElement.textContent = message;
            updateElement.style.display = 'block';

            setTimeout(() => {
                updateElement.style.display = 'none';
            }, 2000);
        }

        // Event listeners for real-time updates
        window.addEventListener('resize', updateScreenInfo);
        window.addEventListener('orientationchange', updateScreenInfo);

        // Initialize
        updateScreenInfo();

        // Update periodically to catch any changes
        setInterval(updateScreenInfo, 5000);
    </script>
</body>
</html>

Key Properties Summary

Practical Applications

1. Responsive Design

Property	Description	Typical Values	Use Cases
screen.width	Total physical screen width	1920, 1366, 1440	Responsive design
screen.height	Total physical screen height	1080, 768, 900	Full-screen apps
screen.availWidth	Available width (excludes OS UI)	~1920 (minus taskbar)	Window sizing
screen.availHeight	Available height (excludes OS UI)	~1040 (minus taskbar)	Popup positioning
screen.colorDepth	Number of bits for color	24, 30, 32	Image optimization
screen.pixelDepth	Bits per pixel	24, 30, 32	Graphics optimization
window.devicePixelRatio	Physical to CSS pixels ratio	1, 1.5, 2, 3	High-DPI images

// Check if mobile device
if (screen.availWidth < 768) {
    loadMobileLayout();
}

// High-DPI screen detection
if (window.devicePixelRatio > 1) {
    loadRetinaImages();
}

2. Window Management

// Position window in center of available screen
const left = (screen.availWidth - 800) / 2;
const top = (screen.availHeight - 600) / 2;
window.moveTo(left, top);

3. Performance Optimization

// Reduce graphics quality on low-color-depth screens
if (screen.colorDepth < 24) {
    useCompressedTextures();
    reduceColorPalette();
}

This comprehensive tutorial provides complete understanding and practical examples of all Window Screen properties with beautiful visualizations and real-time updates!