HTML DOM Window visualViewport屬性用法及代碼示例

Window界麵的visualViewport屬性返回一個VisualViewport對象，該對象表示當前窗口的可視視口。這是一個隻讀屬性。

用法:

var visualViewport = Window.visualViewport;

返回值：一個VisualViewport對象。

例：本示例說明如何使用此對象獲取VisualViewport對象。

此外，我們還使用該對象顯示了VisualViewport的一些細節。

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

輸出：

單擊按鈕之前：

單擊按鈕後：

在控製台中：

支持的瀏覽器：

穀歌瀏覽器
Safari
Firefox
Opera
Edge

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 HTML DOM Window visualViewport property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。