Article Categories

Selected Reading

How to detect the screen resolution with JavaScript?

Javascript Web Development Object Oriented Programming

To detect the screen resolution in JavaScript, you can use the window.screen object, which provides properties to access display dimensions and available screen space.

Screen Properties Overview

The window.screen object offers several useful properties:

screen.width and screen.height - Total screen dimensions
screen.availWidth and screen.availHeight - Available screen space (excluding taskbars)

Basic Screen Resolution Detection

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Screen Resolution Detection</title>
</head>
<body>
   <div id="screenInfo"></div>
   
   <script>
      // Get screen dimensions
      const totalWidth = screen.width;
      const totalHeight = screen.height;
      const availWidth = screen.availWidth;
      const availHeight = screen.availHeight;
      
      // Display results
      const info = document.getElementById('screenInfo');
      info.innerHTML = `
         <h3>Screen Resolution:</h3>
         <p>Total Resolution: ${totalWidth} x ${totalHeight}</p>
         <p>Available Space: ${availWidth} x ${availHeight}</p>
      `;
      
      console.log(`Total Resolution: ${totalWidth} x ${totalHeight}`);
      console.log(`Available Space: ${availWidth} x ${availHeight}`);
   </script>
</body>
</html>

Total Resolution: 1920 x 1080
Available Space: 1920 x 1040

Complete Screen Information

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Complete Screen Info</title>
</head>
<body>
   <div id="fullInfo"></div>
   
   <script>
      function getScreenInfo() {
         return {
            width: screen.width,
            height: screen.height,
            availWidth: screen.availWidth,
            availHeight: screen.availHeight,
            colorDepth: screen.colorDepth,
            pixelDepth: screen.pixelDepth
         };
      }
      
      const screenData = getScreenInfo();
      const infoDiv = document.getElementById('fullInfo');
      
      infoDiv.innerHTML = `
         <h3>Complete Screen Information:</h3>
         <ul>
            <li>Screen Resolution: ${screenData.width} x ${screenData.height}</li>
            <li>Available Area: ${screenData.availWidth} x ${screenData.availHeight}</li>
            <li>Color Depth: ${screenData.colorDepth} bits</li>
            <li>Pixel Depth: ${screenData.pixelDepth} bits</li>
         </ul>
      `;
      
      console.log('Screen Info:', screenData);
   </script>
</body>
</html>

Screen Info: {
  width: 1920,
  height: 1080,
  availWidth: 1920,
  availHeight: 1040,
  colorDepth: 24,
  pixelDepth: 24
}

Property Comparison

Property	Description	Use Case
`screen.width`	Total screen width	Full display dimensions
`screen.availWidth`	Available width (minus system bars)	Usable screen space
`screen.colorDepth`	Color bits per pixel	Display quality detection

Responsive Design Application

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Responsive Detection</title>
</head>
<body>
   <div id="deviceType"></div>
   
   <script>
      function detectDeviceType() {
         const width = screen.width;
         
         if (width <= 768) {
            return 'Mobile Device';
         } else if (width <= 1024) {
            return 'Tablet Device';
         } else {
            return 'Desktop Device';
         }
      }
      
      const deviceType = detectDeviceType();
      const typeDiv = document.getElementById('deviceType');
      
      typeDiv.innerHTML = `
         <h3>Device Detection:</h3>
         <p>Screen Width: ${screen.width}px</p>
         <p>Device Type: ${deviceType}</p>
      `;
      
      console.log(`Device Type: ${deviceType} (${screen.width}px wide)`);
   </script>
</body>
</html>

Device Type: Desktop Device (1920px wide)

Conclusion

Use screen.width and screen.height for total display dimensions, or screen.availWidth and screen.availHeight for usable screen space. These properties enable responsive design and device-specific optimizations.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next