JavaScript Window Screen

The window.screen object has data about the users screen. Because the window object is at the top of the scope chain, its attributes are available without specifying the window object. Lets see its Properties in below examples

Get Width of the Screen.


<!DOCTYPE html>
<html lang="en">
<body>
    <script>
    function getWidth() {
        alert("Screen width is: " + screen.width);
    }
    </script>
     
    <button type="button" onclick="getWidth();">Get Width</button>
</body>
</html>   

//Output- Screen width is: 1366

Get Height of the Screen.


<!DOCTYPE html>
<html lang="en">
<body>
    <script>
    function getHeight() {
        alert("Screen height is: " + screen.height);
    }
    </script>
     
    <button type="button" onclick="getHeight();">Get Height</button>
</body>
</html>   

//Output- Screen height is: 768

Get Screen Color Depth


<!DOCTYPE html>
<html lang="en">
<body>
    <script>
    function fetchColorDepth() {
        alert("Screen color depth: " + screen.colorDepth);
    }
    </script>
     
    <button type="button" onclick="fetchColorDepth();">Color Depth</button>
</body>
</html> 

// Output- Screen color depth: 24

Get Screen Pixel Depth


<!DOCTYPE html>
<html lang="en">
<body>
    <script>
    function fetchPixelDepth() {
        alert("Screen pixel depth: " + screen.pixelDepth);
    }
    </script>
     
    <button type="button" onclick="fetchPixelDepth();">Pixel Depth</button>
</body>
</html>    

// Output- Screen pixel depth: 24

Get Available Width of screen


<!DOCTYPE html>
<html lang="en">
<body>
    <script>
    function getAvailWidth() {
        alert("Available Screen Width: " + screen.availWidth);
    }
    </script>
     
    <button type="button" onclick="getAvailWidth();">Available Width</button>
</body>
</html>       

// Output- Available Screen Width: 1366

Get Available Height of screen


<!DOCTYPE html>
<html lang="en">
<body>
    <script>
    function getAvailHeight() {
        alert("Available Screen Height: " + screen.availHeight);
    }
    </script>
     
    <button type="button" onclick="getAvailHeight();">Available Height</button>
</body>
</html>     

// Output- Available Screen Height: 728