Поймать событие браузера «увеличить» в JavaScript

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

Благодарю.

 epascarello15 июн. 2009 г., 16:43
Я считаю, что новые браузеры запускают событие onresize при увеличении страницы.
 HorusKol20 дек. 2012 г., 06:17
@epascarello - да, но это не лишает законной силы мой комментарий
 Assaf Lavie10 авг. 2012 г., 22:35
На самом деле не дубликат. Вопрос здесь в том, чтобы поймать событие, а не определить уровень масштабирования.
 Brock08 апр. 2014 г., 17:34
Я хотел бы подтвердить, что «onresize» происходит в новейших браузерах. До сих пор я вижу, что новые наборы Chrome (33), FF (28), IE (11 и 11 в 9-м режиме) правильно запускают событие при увеличении или уменьшении масштаба.
 Nosredna22 окт. 2009 г., 01:58
У меня похожая проблема, но я не просто хочу знать, когда изменяется масштаб, я хочу также знать значение масштабирования при загрузке моей страницы.

Ответы на вопрос(12)

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

Решение Вопроса

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

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

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

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

 Samy Bencherif06 июл. 2017 г., 00:23
такжеdocument.body.offsetWidth
 Walter K08 авг. 2012 г., 23:57
Можно проверить параметры размера внутри обработчика загрузки для тела. Любопытно, что при отладке IE8 против 9 кажется, что обработчик onresize для тела передается документ в IE8, в то время как IE9 пропускает окно, как и Chrome.
 vijayant27 июн. 2017 г., 17:06
Если вы поместите два элемента в одно и то же положение, а страница будет загружена при увеличении, не будет ли смещение между этими двумя элементами? Разве это не говорит о том, была ли страница уже увеличена или нет?
 newplayer6519 авг. 2017 г., 06:22
Использование такого метода также срабатывает, когда пользователь изменяет размер окна, так почему бы просто не использовать прослушиватель события resize? В этом случае это также жизнеспособное решение.
<script>
var zoomv = function() {
  if(topRightqs.style.width=='200px){
  alert ("zoom");
  }
};
zoomv();
</script>

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

Создайте файл .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;
    }
}

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

 Artur Stary17 февр. 2016 г., 10:52
Этот код будет выполняться на каждом экране <1000 пикселей и не имеет ничего общего с масштабированием
 seebiscuit11 янв. 2016 г., 23:56
Какая связь междуmax-width а коэффициент масштабирования?
 Saumil17 февр. 2016 г., 21:58
@ArturStary нет способа определить, увеличен ли браузер, но есть много обходных путей, и один из них - это то, что я упомянул в своем ответе. Более того, я сказал, что вы можете изменить значение 1000px, чтобы проверить разные размеры экрана, что даст эффект разного уровня масштабирования.

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

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

 Ben15 сент. 2017 г., 23:02
Оба правда. Ред.
 lowtechsun25 янв. 2017 г., 19:43
Chrome и Firefox для Android не будут вызывать событие изменения размера при увеличении.
 Vincent15 февр. 2017 г., 04:41
Лучшей новостью будет фактическое событие масштабирования, отличное от события изменения размера.
 Reahreic01 февр. 2017 г., 23:26
Это не очень хорошая новость, если вы не хотите, чтобы масштабирование вызывало событие изменения размера.

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

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

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

 designermonkey21 июл. 2012 г., 18:02
Используя jQuery, IE8 правильно генерирует событие изменения размера.

работает для меня. («Mozilla / 5.0 (X11; Linux x86_64; Gecko / 20100101 Firefox / 50.0)».

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

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

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

демонстрация

 Ferruccio20 авг. 2014 г., 16:44
обнаружение зума, кажется, перешел кgithub.com/tombigel/detect-zoom
 lowtechsun25 янв. 2017 г., 02:10
Не работает на Firefox для Android 4.4.2. Также в FF для мобильной галочкиAlways enable zoom кнопка в опции доступности. Демо не будет реагировать на изменения.

чтобы реагировать на «события» 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);
})();
 lowtechsun25 янв. 2017 г., 01:45
@StijndeWitt После прочтенияэто Я начинаю понимать предложенный путь, сейчас я работаю над решением с фильтрацией событий изменения размера, особенно на мобильных устройствах. Кто угодно?
 KajMagnus14 апр. 2011 г., 04:25
@gcb Вы правы, он тоже влияет на изменение размера, я только что проверил.
 gcb10 дек. 2010 г., 20:30
как насчет ложных срабатываний с изменением размеров окна?
 Stijn de Witt09 нояб. 2012 г., 13:54
Но вы можете отфильтровать те случаи, когда вы также реализуете обработчик onresize. Так что основы для решения здесь, я бы сказал.
 Biepbot Von Stirling30 дек. 2017 г., 13:35
Ложные срабатывания являются проблемой, да. Разве это не устранит 99,99% всех ложных срабатываний, проверив, поддерживается ли соотношение сторон? Пусть скрипт запомнит последнее соотношение, вычислит новое соотношение и проверит, совпадают ли они. Объедините это с разной шириной, и у вас должна быть хорошая база

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

 Nolo21 окт. 2018 г., 16:24
Я не буду голосовать, потому что вижу, что у вас есть решение, которое работает, и я понимаю, что делает ваш код, но я бы не рекомендовал использовать магическое число, такое как0.05 по крайней мере, без предоставления хорошего объяснения. ;-) Например, я знаю, что в Chrome, в частности, 10% - это наименьшее значение, которое браузер будет увеличивать в любом случае, но не ясно, что это верно для других браузеров. К вашему сведению, всегда проверяйте ваш код и будьте готовы защитить или улучшить его.

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

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

function pollZoomFireEvent() 
{ 

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

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

 fuzzyTew15 окт. 2011 г., 02:49
Throttle / debounce полезна, только если опрос вызван некоторыми другими событиями (например, движение мыши или нажатие клавиши).

Ваш ответ на вопрос