Capture o evento “zoom” do navegador em JavaScript

É possível detectar, usando JavaScript, quando o usuário altera o zoom em uma página? Eu simplesmente quero pegar um evento “zoom” e responder a ele (semelhante ao evento window.onresize).

Obrigado.

    Não há como detectar ativamente se há um zoom. Eu encontrei uma boa input aqui sobre como você pode tentar implementá-lo.

    Eu encontrei duas maneiras de detectar o nível de zoom. Uma maneira de detectar alterações no nível de zoom depende do fato de os valores percentuais não serem ampliados. Um valor percentual é relativo à largura da viewport e, portanto, não é afetado pelo zoom da página. Se você inserir dois elementos, um com uma posição em porcentagens e outro com a mesma posição em pixels, eles se afastarão quando a página for ampliada. Encontre a relação entre as posições de ambos os elementos e você tem o nível de zoom. Veja o caso de teste. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

    Você também pode fazer isso usando as ferramentas do post acima. O problema é que você está fazendo mais ou menos suposições sobre se a página foi ampliada ou não. Isso funcionará melhor em alguns navegadores do que em outros.

    Não há como saber se a página é ampliada se eles carregarem sua página quando estiverem com zoom.

    Eu estou usando este pedaço de JavaScript para reagir ao Zoom “events”.
    Ele pesquisa a largura da janela. (Como sugerido na página (à qual Ian Elliott está vinculado): http://novemberborn.net/javascript/page-zoom-ff3 [archive] )

    Testado com o Chrome, o Firefox 3.6 e o ​​Opera, não o IE.

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

    Isso funciona para mim:

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

    É necessário apenas no IE8. Todos os outros navegadores geram naturalmente um evento de redimensionamento.

    Boas notícias todos algumas pessoas! Os navegadores mais recentes acionam um evento de redimensionamento de janela quando o zoom é alterado.

    Existe um plugin bacana construído a partir do yonran que pode fazer a detecção. Aqui está sua pergunta respondida anteriormente no StackOverflow. Funciona para a maioria dos navegadores. A aplicação é tão simples como esta:

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

    Demonstração

    Gostaria de sugerir uma melhoria para a solução anterior com alterações de acompanhamento à largura da janela. Em vez de manter sua própria matriz de ouvintes de events, você pode usar o sistema de events javascript existente e acionar seu próprio evento na alteração de largura e vincular manipuladores de events a ele.

     $(window).bind('myZoomEvent', function() { ... }); function pollZoomFireEvent() { if ( ... width changed ... ) { $(window).trigger('myZoomEvent'); } } 

    Throttle / debounce pode ajudar a reduzir a taxa de chamadas do seu manipulador.

    Você também pode obter os events de redimensionamento de texto e o fator de zoom injetando uma div contendo pelo menos um espaço não quebrável (possivelmente oculto) e verificando regularmente sua altura. Se a altura mudar, o tamanho do texto mudou (e você sabe quanto – isso também triggers, por acaso, se a janela for ampliada no modo de página inteira, e você ainda obterá o fator de zoom correto, com a mesma altura / razão de altura).

    No iOS 10, é possível adicionar um ouvinte de evento ao evento touchmove e detectar, se a página estiver ampliada com o evento atual.

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

    Embora esta seja uma pergunta de 9 anos, o problema persiste!

    Eu tenho detectado resize enquanto excluo o zoom em um projeto, então eu editei meu código para fazer com que ele funcionasse para detectar redimensionamento e zoom exclusivos um do outro. Funciona na maior parte do tempo, por isso, se a maioria for boa o suficiente para o seu projeto, isso deve ser útil! Ele detecta o zoom 100% do tempo no que testei até agora. O único problema é que, se o usuário ficar louco (ou seja, resize de maneira espástica a janela) ou a janela ficar desfocada, ele pode triggersr como um zoom em vez de resize a janela.

    Ele funciona detectando uma alteração em window.outerWidth ou window.outerHeight como redimensionamento de janela ao detectar uma alteração em window.innerWidth ou window.innerHeight independente do redimensionamento de janela como um zoom.

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

    Eu tive esse problema e finalmente. Eu tenho uma solução. é simples e funciona para mim. (“Mozilla / 5.0 (X11; Linux x86_64; Gecko / 20100101 Firefox / 50.0).

    proporção de px = proporção de pixel físico para css px. Se houver um zoom, os pixels da viewport serão reduzidos e deverão caber na canvas para que a proporção aumente. mas no redimensionamento da janela, o tamanho da canvas diminui, assim como o tamanho da imagem. então a proporção será mantida.

    zoom: acione o evento windows.resize -> e altere o redimensionamento do px_ratio: acione o evento windows.resize -> não altere o 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; } } 

    Eu estou respondendo a um link de 3 anos, mas eu acho que aqui está uma resposta mais aceitável,

    Crie o arquivo .css como,

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

    POR EXEMPLO:-

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

    O código acima torna o tamanho da fonte ’10px’ quando a canvas é ampliada para aproximadamente 125%. Você pode verificar o nível de zoom diferente alterando o valor de ‘1000px’.