JavaScript Window innerWidth and innerHeight Properties

Last Updated : 12 Mar, 2024

The innerWidth property in JavaScript returns the width and innerHeight property returns the height of window content area.

Syntax:

window.innerWidth
window.innerHeight

Parameter: It doesn’t require any parameters.

Return Value: It returns a number(Representing the Width and Height of the window’s content area).

Note: For IE 8 i.e (Internet Edge 8) or earlier, use clientWidth and clientHeight to get the width and height of the window.

Example: In this example we retrieve and display the inner width and height of the browser window using JavaScript, showing the dimensions dynamically in a paragraph element.

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Browser Window</title> 
    </head> 
  
    <body> 
        <h2>Browser Window</h2> 
        <p id="demo"></p> 
        <script> 
            var Width, Height, result; 
            Width = 
                window.innerWidth || 
                document.documentElement 
                    .clientWidth || 
                document.body.clientWidth; 
            Height = 
                window.innerHeight || 
                document.documentElement 
                    .clientHeight || 
                document.body.clientHeight; 
            result = 
                document.getElementById("demo"); 
            result.innerHTML = 
                "Browser inner width: " + 
                Width + 
                "<br>Browser inner height: " + 
                Height; 
        </script> 
    </body> 
</html> 