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

ОО стиль. Обязательно прокрутите вверх и оставьте отзыв на код Дэна. Это мило и быстро и работает как шарм для меня.

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

может привести к аварийному завершению выражения типа http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

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

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

Я использую этот кусок 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);
})();

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

каждый

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

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

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

Существует замечательный плагин, созданный из

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

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

на Jake Archibald на HTML5 Rocks.

Throttle / debounce

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

function pollZoomFireEvent() 
{ 

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

может помочь снизить скорость вызовов вашего обработчика. В iOS 10 это p Можно добавить прослушиватель событий к событию

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

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

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

Px ratio = ratio of Физический пиксель в css px.Если при любом увеличении пиксели окна просмотра уменьшаются и должны соответствовать размеру экрана, так что соотношение должно увеличиваться. Но при изменении размера окна уменьшается размер экрана, а также пиксели. Таким образом, соотношение будет поддерживаться.

масштабирование: вызвать событие windows.resize — & gt ; и изменить px_ratio resizing: изменить событие windows.resize — & gt ; не изменит px_ratio

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

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

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

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

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

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

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

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

JavaScript — Как мне обрабатывать переводы строк в JSON? — Переполнение стека