Question

当用户更改页面中的缩放时，是否可以使用JavaScript检测？我只是想捕捉一个“缩放”事件并对其做出响应（类似于window.onresize事件）。

感谢。

Answer 1

没有办法主动检测是否有变焦。我在这里找到了一个很好的条目，你可以尝试如何实现它。

我找到了两种方法来检测缩放级别。一种检测缩放的方法等级变化依赖于这一事实百分比值未缩放。一个百分比值是相对于视口宽度，因此不受影响页面缩放。如果插入两个元素，一个位置百分比，和一个在同一个位置的人像素，它们会在分开的时候分开页面被缩放。找出两者之间的比例两个元素的位置和你有缩放级别。见测试案件。 http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

您也可以使用上述帖子的工具来完成。问题是你或多或少地对页面是否缩放进行了有根据的猜测。这在某些浏览器中比其他浏览器更好用。

如果页面在缩放时加载页面，则无法判断页面是否已缩放。

Answer 2

我正在使用这段JavaScript来对缩放“事件”作出反应它轮询窗口宽度。（正如本页（伊恩·艾略特与之链接）所建议的那样：http://novemberborn.net/javascript/page-zoom-ff3 [archive]）

使用Chrome，Firefox 3.6和Opera进行测试，而不是IE。

问候，马格努斯

var zoomListeners = [];

(function(){
  // Poll the pixel width of the window; invoke zoom listeners
  // if the width has been changed.
  var lastWidth = 0;
  function pollZoomFireEvent() {
    var widthNow = jQuery(window).width();
    if (lastWidth == widthNow) return;
    lastWidth = widthNow;
    // Length changed, user must have zoomed, invoke listeners.
    for (i = zoomListeners.length - 1; i >= 0; --i) {
      zoomListeners[i]();
    }
  }
  setInterval(pollZoomFireEvent, 100);
})();

Answer 3

好消息~~每个人~~有些人！更新缩放时，较新的浏览器将触发窗口调整大小事件。

Answer 4

这对我有用：

        var deviceXDPI = screen.deviceXDPI;
        setInterval(function(){
            if(screen.deviceXDPI != deviceXDPI){
                deviceXDPI = screen.deviceXDPI;
                ... there was a resize ...
            }
        }, 500);

仅在IE8上需要它。所有其他浏览器自然会生成调整大小事件。

Answer 5

有一个由yonran构建的可以执行检测的漂亮插件。以下是他之前关于StackOverflow的answered问题。它适用于大多数浏览器。应用程序就像这样简单：

window.onresize = function onresize() {
  var r = DetectZoom.ratios();
  zoomLevel.innerHTML =
    "Zoom level: " + r.zoom +
    (r.zoom !== r.devicePxPerCssPx
        ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
        : "");
}

Demo

Answer 6

我想建议改进以前的解决方案，跟踪窗口宽度的变化。您可以使用现有的javascript事件系统，在宽度更改时触发自己的事件，并将事件处理程序绑定到它，而不是保留自己的事件侦听器数组。

$(window).bind('myZoomEvent', function() { ... });

function pollZoomFireEvent() 
{ 

    if ( ... width changed ... ) {
        $(window).trigger('myZoomEvent');
    }
}

Throttle/debounce有助于降低处理程序的调用率。

Answer 7

<script>
var zoomv = function() {
  if(topRightqs.style.width=='200px){
  alert ("zoom");
  }
};
zoomv();
</script>

Answer 8

在iOS 10上，可以向touchmove事件添加事件监听器，并检测是否使用当前事件缩放页面。

＆＃13;

var prevZoomFactorX;
var prevZoomFactorY;
element.addEventListener("touchmove", (ev) => {
  let zoomFactorX = document.documentElement.clientWidth / window.innerWidth;
  let zoomFactorY = document.documentElement.clientHeight / window.innerHeight;
  let pageHasZoom = !(zoomFactorX === 1 && zoomFactorY === 1);

  if(pageHasZoom) {
    // page is zoomed
    
    if(zoomFactorX !== prevZoomFactorX || zoomFactorY !== prevZoomFactorY) {
      // page is zoomed with this event
    }
  }
  prevZoomFactorX = zoomFactorX;
  prevZoomFactorY = zoomFactorY;
});

＆＃13;

Answer 9

我终于遇到了这个问题。我有一个解决方案。这很简单，对我有用。（“ Mozilla / 5.0（X11; Linux x86_64; Gecko / 20100101 Firefox / 50.0）。

px比率=物理像素与css px的比率。如果进行任何缩放，则视口pxes减小并且应适合屏幕，因此比例必须变大。但在调整窗口大小时，屏幕尺寸会减小，并且会降低pxes。因此该比率将保持不变。

缩放：触发windows.resize事件->并更改px_ratio 调整大小：触发windows.resize事件->不变px_ratio

//for zoom detection
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

$(window).resize(function(){isZooming();});

function isZooming(){
    var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
    if(newPx_ratio != px_ratio){
        px_ratio = newPx_ratio;
        console.log("zooming");
        return true;
    }else{
        console.log("just resizing");
        return false;
    }
}

Answer 10

您还可以通过注入包含至少一个不可破坏空间（可能是隐藏）的div并定期检查其高度来获取文本大小调整事件和缩放系数。如果高度发生变化，文本大小也会发生变化（并且您知道多少 - 如果窗口在整页模式下变焦，这也会触发，并且您仍然会获得正确的缩放系数，具有相同的高度/身高比例。）

Answer 11

尽管这是一个有9年历史的问题，但问题仍然存在！

在排除项目缩放时，我一直在检测调整大小，因此我编辑了代码以使其能够同时检测缩放和缩放。它在大多数情况下都有效，因此，如果 most 对您的项目足够好，那么这会有所帮助！到目前为止，它可以检测到100％的缩放比例。唯一的问题是，如果用户发疯（即对窗口进行大小调整）或窗口滞后，则可能会以缩放而不是窗口大小的方式触发。

通过检测window.outerWidth或window.outerHeight的变化作为窗口调整大小，同时检测window.innerWidth或window.innerHeight的变化而不依赖于窗口调整大小来工作。

//init object to store window properties
var windowSize = {
  w: window.outerWidth,
  h: window.outerHeight,
  iw: window.innerWidth,
  ih: window.innerHeight
};

window.addEventListener("resize", function() {
  //if window resizes
  if (window.outerWidth !== windowSize.w || window.outerHeight !== windowSize.h) {
    windowSize.w = window.outerWidth; // update object with current window properties
    windowSize.h = window.outerHeight;
    windowSize.iw = window.innerWidth;
    windowSize.ih = window.innerHeight;
    console.log("you're resizing"); //output
  }
  //if the window doesn't resize but the content inside does by + or - 5%
  else if (window.innerWidth + window.innerWidth * .05 < windowSize.iw ||
    window.innerWidth - window.innerWidth * .05 > windowSize.iw) {
    console.log("you're zooming")
    windowSize.iw = window.innerWidth;
  }
}, false);

注意：我的解决方案类似于KajMagnus的解决方案，但这对我来说效果更好。

Answer 12

The resize event在现代浏览器上工作，方法是将事件附加在window上，然后读取body或其他元素（例如，.getBoundingClientRect()）的值。

在某些早期的浏览器中，可以注册调整大小事件 HTML元素上的处理程序。仍然可以设置onresize 属性或使用addEventListener（）在任何元素上设置处理程序。但是，调整大小事件仅在窗口对象上触发（即由document.defaultView返回）。 只有在窗口对象将收到调整大小事件。

window.addEventListener("resize", getSizes, false)
        
function getSizes(){
  let body = document.body
  console.log(body.clientWidth +"px x "+ body.clientHeight + "px")
}

另一种选择：the ResizeObserver API

根据您的布局，您可以注意调整特定元素的大小。

这在《响应式》布局上效果很好，因为缩放时容器框的大小会调整。

function watchBoxchange(e){
 // console.log(e[0].contentBoxSize.inlineSize+" "+e[0].contentBoxSize.blockSize)
 info.textContent = e[0].contentBoxSize.inlineSize+" * "+e[0].contentBoxSize.blockSize + "px"
}

new ResizeObserver(watchBoxchange).observe(fluid)

#fluid {
  width: 200px;
  height:100px;
  overflow: auto;
  resize: both;
  border: 3px black solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 8vh
}

<div id="fluid">
   <info id="info"></info> 
</div>

注意，不要使用户手势事件中的javascript任务超载。需要重绘时，请使用requestAnimationFrame。

Answer 13

这是一个干净的解决方案：

// polyfill window.devicePixelRatio for IE
if(!window.devicePixelRatio){
  Object.defineProperty(window,'devicePixelRatio',{
    enumerable: true,
    configurable: true,
    get:function(){
      return screen.deviceXDPI/screen.logicalXDPI;
    }
  });
}
var oldValue=window.devicePixelRatio;
window.addEventListener('resize',function(e){
  var newValue=window.devicePixelRatio;
  if(newValue!==oldValue){
    // TODO polyfill CustomEvent for IE
    var event=new CustomEvent('devicepixelratiochange');
    event.oldValue=oldValue;
    event.newValue=newValue;
    oldValue=newValue;
    window.dispatchEvent(event);
  }
});

window.addEventListener('devicepixelratiochange',function(e){
  console.log('devicePixelRatio changed from '+e.oldValue+' to '+e.newValue);
});

Answer 14

根据MDN，“ matchMedia”是执行此操作的正确方法https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes

有点挑剔，因为每个实例一次只能观看一个MQ，因此，如果您对任何缩放级别更改感兴趣，则需要进行一系列匹配。浏览器负责发出可能比轮询更有效的事件，并且您可以限制或消除回调或将回调固定到动画帧或其他内容-这是一个非常活泼的实现，可以随时通过_throttle或其他方式进行交换如果您已经依赖于此。

运行代码段并在浏览器中放大和缩小，注意标记中的更新值-我仅在Firefox中进行了测试！莱姆知道您是否发现任何问题。

const el = document.querySelector('#dppx')

if ('matchMedia' in window) {
  function observeZoom(cb, opts) {
    opts = {
      // first pass for defaults - range and granularity to capture all the zoom levels in desktop firefox
      ceiling: 3,
      floor: 0.3,
      granularity: 0.05,
      ...opts
    }
    const precision = `${opts.granularity}`.split('.')[1].length

    let val = opts.floor
    const vals = []
    while (val <= opts.ceiling) {
      vals.push(val)
      val = parseFloat((val + opts.granularity).toFixed(precision))
    }

    // construct a number of mediamatchers and assign CB to all of them
    const mqls = vals.map(v => matchMedia(`(min-resolution: ${v}dppx)`))

    // poor person's throttle
    const throttle = 3
    let last = performance.now()
    mqls.forEach(mql => mql.addListener(function() {
      console.debug(this, arguments)
      const now = performance.now()
      if (now - last > throttle) {
        cb()
        last = now
      }
    }))
  }

  observeZoom(function() {
    el.innerText = window.devicePixelRatio
  })
} else {
  el.innerText = 'unable to observe zoom level changes, matchMedia is not supported'
}

<div id='dppx'>--</div>

Answer 15

这是一种本机方式（主要框架无法放大Chrome，因为它们dont supports passive event behaviour）


//For Google Chrome
document.addEventListener("mousewheel", event => {
  console.log(`wheel`);
  if(event.ctrlKey == true)
  {
    event.preventDefault();
    if(event.deltaY > 0) {
      console.log('Down');
    }else {
      console.log('Up');
    }
  }
}, { passive: false });

// For Mozilla Firefox
document.addEventListener("DOMMouseScroll", event => {
  console.log(`wheel`);
  if(event.ctrlKey == true)
  {
    event.preventDefault();
    if(event.detail > 0) {
      console.log('Down');
    }else {
      console.log('Up');
    }
  }
}, { passive: false });

Answer 16

我回复了一个3岁的链接，但我想这是一个更可接受的答案，

将.css文件创建为，

@media screen and (max-width: 1000px) 
{
       // things you want to trigger when the screen is zoomed
}

EG： -

@media screen and (max-width: 1000px) 
{
    .classname
    {
          font-size:10px;
    }
}

当屏幕缩放到大约125％时，上面的代码会使字体的大小为“10px”。您可以通过更改“1000px”的值来检查不同的缩放级别。

在JavaScript中捕获浏览器的“缩放”事件

16 个答案: