如何使用 JavaScript 在所有现代浏览器中检测页面缩放级别？

在本文中，我们将讨论如何在网页上找到当前的缩放量。

方法一：使用outerWidth和innerWidth属性：在Chrome和Microsoft Edge等webkit浏览器中更容易检测缩放级别。这个方法使用了outerWidth和innerWidth属性，它们是JavaScript 的内置函数。 outerWidth先减去 10，以考虑滚动条，然后除以innerWidth以获得缩放级别。

注意：缩放量可能与浏览器显示的缩放量不完全相同。这可以通过对值进行四舍五入来解决。

句法：

let zoom = (( window.outerWidth - 10 ) / window.innerWidth) * 100;

例子：

HTML

  

    
        GeeksforGeeks
    
  
    
        Zoom in or out of the page to
        get the current zoom value
    
  
    Current Zoom Level:
        
        
    
  
    
        window.addEventListener(
            "resize", getSizes, false);
  
        let out = document.querySelector(".output");
  
        function getSizes() {
            let zoom = ((window.outerWidth - 10)
                / window.innerWidth) * 100;
                  
            out.textContent = zoom;
        }
    

  

输出：

方法二：使用clientWidth和clientHeight属性：由于在多个浏览器中无法找到缩放量，因此可以通过页面的这些尺寸来查找网站的尺寸并进行操作。此方法使用clientWidth和clientHeigh属性，它们是 JavaScript 的内置函数。

句法：

let zoom = body.clientWidth + "px x " + body.clientHeight + "px";

例子：

HTML

  

    
        /* Set the body to occupy the
           whole browser window
           when there is less content */
        body {
            height: 100vh;
            margin: 0;
        }
    

  

    
        GeeksforGeeks
    
  
    
        Zoom in or out of the page to
        get the current zoom value
    
  
    
        Current Zoom Level in pixels:
        
        
    
  
    
        window.addEventListener(
                "resize", getSizes, false);
                  
        let out = document.querySelector(".output");
  
        function getSizes() {
            let body = document.body;
            let zoom = body.clientWidth + "px x " +
                body.clientHeight + "px";
            out.textContent = zoom;
        }
    

  

输出：