Поймать событие браузера "zoom" в JavaScript

Question

Можно ли с помощью JavaScript определить, когда пользователь изменяет масштаб страницы? Я просто хочу перехватить событие «zoom» и ответить на него (аналогично событию window.onresize).

Спасибо.

Answer 1

Нет способа активно определить, есть ли зум. Здесь я нашел хорошую запись о том, как вы можете попытаться реализовать это.

Я нашел два способа обнаружения уровень масштабирования. Один из способов обнаружить зум изменения уровня полагаются на тот факт, что процентные значения не увеличены. процентное значение относительно ширина области просмотра, и, следовательно, не зависит от масштаб страницы. Если вы вставите два элемента, один с позицией в процентах, и один с той же позиции в пикселей, они разойдутся, когда страница увеличена. Найти соотношение между положения обоих элементов и у вас есть уровень масштабирования. См тест дело. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

Вы также можете сделать это с помощью инструментов, описанных выше. Проблема в том, что вы более или менее делаете обоснованные предположения о том, увеличена ли страница. Это будет работать лучше в некоторых браузерах, чем в других.

Невозможно определить, увеличена ли страница, если они загружают вашу страницу во время увеличения.

Answer 2

Я использую этот кусок JavaScript, чтобы реагировать на "события" Zoom.
Опрашивает ширину окна. (Как несколько предложено на этой странице (на которую ссылался Ян Эллиотт): http://novemberborn.net/javascript/page-zoom-ff3 [архив] )

Протестировано с 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. Это работает для большинства браузеров. Приложение так просто:

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
        : "");
}

Демо

Answer 6

у меня была эта проблема и наконец. У меня есть решение. это просто и работает для меня. («Mozilla / 5.0 (X11; Linux x86_64; Gecko / 20100101 Firefox / 50.0).

px коэффициент = отношение физического пикселя к css px. при любом увеличении пиксели окна просмотра уменьшаются и должны соответствовать экрану, поэтому соотношение должно увеличиваться. но при изменении размера окна уменьшается размер экрана, а также размеры пикселей. поэтому соотношение сохранится.

масштабирование: вызвать событие 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 7

В iOS 10 можно добавить прослушиватель событий к событию touchmove и определить, увеличена ли страница с текущим событием.

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;
});

Answer 8

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

Answer 9

Я хотел бы предложить улучшение предыдущего решения с отслеживанием изменений ширины окна. Вместо сохранения собственного массива слушателей событий вы можете использовать существующую систему событий javascript и запускать собственное событие при изменении ширины, а также привязывать к нему обработчики событий.

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

function pollZoomFireEvent() 
{ 

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

Throttle / debounce может помочь снизить скорость вызовов вашего обработчика.

Answer 10

Хотя это 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, но для меня это сработало.