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

Ответ 1

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

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

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

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

Ответ 2

Я использую этот фрагмент JavaScript для реагирования на события "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);
})();

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

Демо

Ответ 6

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

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

function pollZoomFireEvent() 
{ 

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

Хотя это 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);

Ответ 11

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