HTML DOM Window visualViewport property

Last Updated : 13 Jun, 2022

The visualViewport property of the Window interface returns a VisualViewport object representing the visual viewport for the current window. This is a read-only property.

Syntax:

var visualViewport = Window.visualViewport;

Return Value: A VisualViewport Object.

Example: This example shows how to get the VisualViewport Object using this object.

Also, We have shown some details from VisualViewport using that object.

html

<!DOCTYPE HTML> 
<html>  
<head>
    <meta charset="UTF-8">
    <title>window visualViewport property</title>
</head>   
<body style="text-align:center;">
    <h1 style="color:green;">  
     GeeksforGeeks
    </h1> 
    <p> 
    HTML | window visualViewport property
    </p>
 
    <button onclick = "Geeks()">
    Click Here
    </button>
    <p id="a"></p>
    <script> 
        var a = document.getElementById("a");
        function Geeks(){
            a.innerHTML +="visualViewport Details : " + `<br>`;
            a.innerHTML += "height : " 
+ window.visualViewport.height + `<br>`;
            a.innerHTML += "offsetleft : " 
+ window.visualViewport.offsetleft + `<br>`;
            a.innerHTML += "offsetright : " 
+ window.visualViewport.offsetright + `<br>`;
            a.innerHTML += "onresize : " 
+ window.visualViewport.onresize + `<br>`;
            a.innerHTML += "onscroll : " 
+ window.visualViewport.onscroll + `<br>`;
            a.innerHTML += "pageLeft : " 
+ window.visualViewport.pageLeft + `<br>`;
            a.innerHTML += "pageTop : " 
+ window.visualViewport.pageTop + `<br>`;
            a.innerHTML += "scale : " 
+ window.visualViewport.scale + `<br>`;
            a.innerHTML += "width : " 
+ window.visualViewport.width + `<br>`;
            console.log(window.visualViewport)
        }
  </script> 
</body>   
</html>