Как определить, был ли пользователь увеличен или удален в JavaScript [дубликат]

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

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

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

        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, чтобы реагировать на «события» Zoom. Он проверяет ширину окна. (Как несколько предложено на этой странице (к которому привязал Иэн Эллиот): http://novemberborn.net/javascript/page-zoom-ff3 [архив] )

Протестировано с Chrome, Firefox 3.6 и Opera, а не с IE.

С уважением, Magnus

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

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

Создать файл .css as,

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

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

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

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

function chkboxToggle() {
  if ($('input#chkbox').attr('checked'))
    // do something
  else
    // do something else
}