Skip to content
Related Articles

Related Articles

HTML DOM Window visualViewport property

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
View Discussion
Improve Article
Save Article

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>

Output:

Before Clicking Button:

After Clicking Button: 

In console:

Supported Browsers:

  • Google Chrome 61 and above
  • Safari 13 and above
  • Firefox 91 and above
  • Opera 48 and above
  • Edge 79 and above
  • Internet Explorer not supported

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!