Skip to content
Related Articles

Related Articles

Improve Article
HTML DOM Window visualViewport property
  • Last Updated : 23 Jul, 2020

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.






<!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>

Output:

Before Clicking Button:

After Clicking Button: 

In console:

Supported Browsers:

  • Google Chrome
  • Safari
  • Firefox
  • Opera
  • Edge



My Personal Notes arrow_drop_up
Recommended Articles
Page :