HTML DOM 窗口的visualViewport 属性

Window 接口的visualViewport属性返回一个 VisualViewport 对象，表示当前窗口的可视视口。这是一个只读属性。

句法：

var visualViewport = Window.visualViewport;

返回值：一个 VisualViewport 对象。

示例：此示例显示如何使用此对象获取 VisualViewport 对象。

此外，我们还展示了使用该对象的 VisualViewport 的一些细节。

 
  

    
    window visualViewport property
   

      
     GeeksforGeeks
     
     
    HTML | window visualViewport property
    
  
    
    Click Here
    
    
     
        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)
        }
   
   

输出：

点击按钮前：

点击按钮后：

在控制台中：

支持的浏览器：

• 谷歌浏览器
• 苹果浏览器
• 火狐
• 歌剧
• 边缘