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

Я использую этот фрагмент JavaScript, чтобы реагировать на масштабирование "событий".
Он опрашивает ширину окна. (Как несколько предложено на этой странице (с которой связан Ян Эллиот):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);
})();

это работает для меня:

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

это нужно только на IE8. Все остальные браузеры естественным образом генерируют событие изменения размера.

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

есть отличный плагин, построенный из 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
        : "");
}

демо

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

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

function pollZoomFireEvent() 
{ 

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

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

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

вы также можете получить события изменения размера текста и коэффициент масштабирования, введя div, содержащий по крайней мере неразрывное пространство (возможно, скрытое), и регулярно проверяя его высоту. Если высота изменяется, размер текста изменился (и вы знаете, насколько-это также срабатывает, кстати, если окно масштабируется в полностраничном режиме, и вы все равно получите правильный коэффициент масштабирования с тем же соотношением высоты / высоты).

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

хотя это 9-летний вопрос, проблема сохраняется!

я обнаружил изменение размера при исключении масштабирования в проекте, поэтому я отредактировал свой код, чтобы он работал для обнаружения как изменения размера, так и увеличения исключительно друг от друга. Это работает большинство времени, так что если большинство это достаточно хорошо для вашего проекта, то это должно быть полезно! Он обнаруживает масштабирование 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, но это сработало лучше для меня.

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

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

масштабирование: запуск windows.событие resize - > и изменить px_ratio изменение размера: запуск windows.изменить размер события --> не изменяет 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;
    }
}

я отвечаю на 3-летнюю ссылку, но я думаю, что вот более приемлемый ответ,

создать .CSS-файл как

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

например:-

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

приведенный выше код делает размер шрифта '10px' при увеличении экрана примерно до 125%. Вы можете проверить для различных уровней масштабирования, изменив значение '1000px'.