Событие "масштабирования" браузера Catch в 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. Все остальные браузеры естественным образом генерируют событие resize.

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

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

он работает, обнаруживая изменение в 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).

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

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

я отвечаю на 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".