Como detectar o nível de zoom da página em todos os navegadores modernos?

StackOverflow https://stackoverflow.com/questions/1713771

Pergunta

  1. Como posso detectar o nível de zoom da página em todos os navegadores modernos?Enquanto isso fio diz como fazer isso no IE7 e no IE8, não consigo encontrar uma boa solução para vários navegadores.

  2. O Firefox armazena o nível de zoom da página para acesso futuro.No carregamento da primeira página, conseguiria obter o nível de zoom?Em algum lugar que li, funciona quando ocorre uma alteração de zoom depois a página é carregada.

  3. Existe uma maneira de prender o 'zoom' evento?

Preciso disso porque alguns dos meus cálculos são baseados em pixels e podem flutuar quando ampliados.

Amostra modificada fornecida por @tfl

Esta página alerta diferentes valores de altura quando ampliada. [jsFiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>
Foi útil?

Solução

Agora é uma bagunça ainda maior do que quando essa pergunta foi feita. Ao ler todas as respostas e postagens do blog que eu pude encontrar, aqui está um resumo. Eu também configurei Esta página para testar todos esses métodos de medição do nível de zoom.

Editar (2011-12-12): Eu adicionei um projeto que pode ser clonado: https://github.com/tombigel/detect-zoom

  • Ie8: screen.deviceXDPI / screen.logicalXDPI (ou, para o nível de zoom em relação ao zoom padrão, screen.systemXDPI / screen.logicalXDPI)
  • Ie7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (graças a este exemplo ou esta resposta)
  • Ff3.5 apenas: screen.width / Media Consulta Screen Larth (veja abaixo) (aproveita o fato de que screen.width usa pixels de dispositivo, mas a largura do MQ usa pixels CSS-obrigado a Larguras de QuirksMode)
  • FF3.6: nenhum método conhecido
  • FF4+: Pesquisa binária de consultas de mídia (veja abaixo)
  • Webkit: https://www.chromestatus.com/feature/5737866978131968 (Obrigado a Teo nos comentários)
  • Webkit: meça o tamanho preferido de uma div com -webkit-text-size-adjust:none.
  • Webkit: (quebrado desde R72591) document.width / jQuery(document).width() (graças a Dirk van Oosterbosch acima). Para obter a proporção em termos de pixels de dispositivo (em vez de em relação ao zoom padrão), multiplique por window.devicePixelRatio.
  • Old Webkit? (não verificado): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (a partir de esta resposta)
  • Ópera: document.documentElement.offsetWidth / largura de um position:fixed; width:100% div. daqui (Tabela de larguras de Quirksmode diz que é um bug; A largura interna deve ser CSS PX). Usamos a posição: elemento fixo para obter a largura da viewport incluindo o espaço onde as barras de rolagem estão; document.documentElement.clientwidth exclui essa largura. Isso está quebrado desde em 2011; Não sei mais como obter o nível de zoom na ópera.
  • Outro: Solução flash de Sebastian
  • Não confiável: ouça os eventos do mouse e medam a mudança no Screenx / Alteração no ClientX

Aqui está uma busca binária pelo Firefox 4, já que não conheço nenhuma variável onde seja exposta:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

Outras dicas

Podes tentar

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

Isso fornecerá o nível percentual de zoom do navegador.

Para capturar o evento de zoom que você pode usar

$(window).resize(function() { 
// your code 
});

Para mim, para Chrome/Webkit, document.width / jQuery(document).width() não funcionou. Quando eu fiz minha janela pequena e zoom em meu site, de modo que as barras de rolagem horizontal aparecessem, document.width / jQuery(document).width() não era igual a 1 no zoom padrão. Isto é porque document.width Inclui parte do documento fora da viewport.

Usando window.innerWidth e window.outerWidth trabalhado. Por alguma razão no cromo, a largura externa é medida nos pixels da tela e a largura interna é medida nos pixels CSS.

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

Meu colega de trabalho e eu usamos o script de https://github.com/tombigel/detect-zoom.Além disso, também criamos dinamicamente um elemento svg e verificamos sua propriedade currentScale.Funciona muito bem no Chrome e provavelmente na maioria dos navegadores também.No FF, o recurso "zoom somente texto" deve ser desativado.SVG é suportado na maioria dos navegadores.No momento em que este artigo foi escrito, testado no IE10, FF19 e ​​Chrome28.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

Achei este artigo muito útil. Muito obrigado a Yonran. Eu queria passar um aprendizado adicional que encontrei ao implementar algumas das técnicas que ele forneceu. No FF6 e Chrome 9, foi adicionado suporte a consultas de mídia do JS, o que pode simplificar bastante a abordagem de consulta de mídia necessária para determinar o zoom no FF. Veja os documentos no MDN aqui. Para meus propósitos, eu só precisava detectar se o navegador estava em zoom dentro ou fora, não precisava do fator de zoom real. Consegui minha resposta com uma linha de JavaScript:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

Combinando isso com as soluções IE8+ e Webkit, que também eram linhas únicas, pude detectar o zoom na grande maioria dos navegadores que atingem nosso aplicativo com apenas algumas linhas de código.

zoom = ( window.outerWidth - 10 ) / window.innerWidth

Isso é tudo que você precisa.

Eu tenho uma solução para isso em janeiro de 2016.Testado funcionando nos navegadores Chrome, Firefox e MS Edge.

O princípio é o seguinte.Colete 2 pontos MouseEvent distantes um do outro.Cada evento de mouse vem com coordenadas de tela e documento.Meça a distância entre os 2 pontos em ambos os sistemas de coordenadas.Embora existam deslocamentos fixos variáveis ​​entre os sistemas de coordenadas devido ao mobiliário do navegador, o distância entre os pontos devem ser idênticos se a página não estiver ampliada.A razão para especificar "distante" (coloquei como 12 pixels) é para que pequenas alterações de zoom (por exemplo,90% ou 110%) são detectáveis.

Referência:https://developer.mozilla.org/en/docs/Web/Events/mousemove

Passos:

  1. Adicione um ouvinte de movimento do mouse

    window.addEventListener("mousemove", function(event) {
    // handle event
});

  2. Capture 4 medições de eventos de mouse:

    event.clientX, event.clientY, event.screenX, event.screenY

  3. Meça a distância d_c entre os 2 pontos no sistema cliente

  4. Meça a distância d_s entre os 2 pontos no sistema de tela

  5. Se d_c != d_s então o zoom será aplicado.A diferença entre os dois indica a quantidade de zoom.

N. B.Raramente fazemos cálculos de distância, por ex.quando você pode experimentar um novo evento de mouse que está longe do anterior.

Limitações:Presume que o usuário moverá o mouse pelo menos um pouco e o zoom não poderá ser conhecido até esse momento.

No Internet Explorer 7, 8 e 9, isso funciona:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

O "+0,9" é adicionado para evitar erros de arredondamento (caso contrário, você obteria 104% e 109% quando o zoom do navegador estiver definido como 105% e 110%, respectivamente).

No IE6, o zoom não existe, por isso não é desnecessário verificar o zoom.

O que eu inventei é:

1) Faça um position:fixed <div> com width:100% (id = zoomDiv)

2) Quando a página carrega:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

E funcionou para mim para ctrl+ e ctrl- zooms.

ou posso adicionar a linha a um $(window).onresize() evento para obter o nível de zoom ativo

Código:

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

PS: Este é o meu primeiro post, perdoe quaisquer erros

Isso funcionou muito bem para mim em navegadores baseados em webkit (Chrome, Safari):

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

Parece não funcionar no Firefox.

Isso também funciona no webkit:

var zoomLevel = document.width / document.body.clientWidth;

Basicamente, temos:

  • window.devicePixelRatio que leva em consideração o zoom de nível do navegador*, bem como a densidade de zoom/pixels do sistema.
    * - no nível de zoom Mac/Safari não é levado em consideração
  • consultas de mídia
  • vw/vh Unidades CSS
  • resize Evento, que é desencadeado na mudança de nível de zoom, causa o tamanho efetivo da janela muda

Isso deve ser suficiente para normal Ux. Se você precisar detectar o nível de zoom, pode ser um sinal de design de interface do usuário ruim.

O zoom de pitch é mais difícil de rastrear e não é considerado atualmente.

Sobre Móvel Dispositivos (com Chrome para Android ou Opera Mobile) Você pode detectar zoom por Window.VisualViewport.Scale. https://developer.mozilla.org/en-us/docs/web/api/visual_viewport_api

Detectar no Safari: document.documentElement.clientwidth / window.innerwidth (Retorne 1 se não houver zoom no dispositivo).

Seus cálculos ainda são baseados em vários pixels CSS. Eles são apenas um tamanho diferente na tela agora. Esse é o ponto de zoom de página inteira.

O que você gostaria que acontecesse em um navegador em um dispositivo de 192dpi que, portanto, normalmente exibia quatro pixels de dispositivo para cada pixel em uma imagem? Com 50% de zoom, este dispositivo agora exibe um pixel de imagem em um pixel de dispositivo.

No Chrome

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");

Não testou isso para o IE, mas se você fizer um elemento elem com

min-width: 100%

então 

window.document.width / elem.clientWidth

dará a você o nível de zoom do seu navegador (incluindo o document.body.style.zoom fator).

Isso é para cromada, no despertar do User800583 responda ...

Passei algumas horas neste problema e não encontrei uma abordagem melhor, mas:

  • Existem 16 'ZoomLevel' e não 10
  • Quando o Chrome está em tela cheia/maximizou, a proporção é window.outerWidth/window.innerWidth, e quando não é, a proporção parece ser (window.outerWidth-16)/window.innerWidth, no entanto, o primeiro caso pode ser abordado pelo segundo.

Então eu vim para o seguinte ...

Mas essa abordagem tem limitações: por exemplo, se você jogar o acordeão com a janela do aplicativo (aumentar rapidamente e reduzir a largura da janela), você obterá lacunas entre os níveis de zoom, embora o zoom não tenha mudado (pode ser a largura externa e a largura interna não serem exatamente atualizado ao mesmo tempo).

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

E se você quiser o fator:

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

Eu tenho esta solução para Somente móvel (testado com Android):

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

Se você deseja o nível de zoom logo após o movimento da pitada, provavelmente precisará definir um pouco de tempo limite por causa do atraso de renderização (mas não tenho certeza porque não o testei).

Esta resposta é baseada em comentários sobre o DevicePixelratio, voltando incorretamente na resposta do User1080381.

Descobri que esse comando estava voltando incorretamente em alguns casos também ao trabalhar com um desktop, Surface Pro 3 e Surface Pro 4.

O que eu descobri é que funcionou na minha área de trabalho, mas o SP3 e o SP4 estavam dando números diferentes um do outro e da área de trabalho.

Notei, porém, que o SP3 estava voltando como 1 vezes e meia no nível de zoom que eu esperava. Quando dei uma olhada nas configurações de exibição, o SP3 foi realmente definido para 150% em vez dos 100% que eu tinha na minha área de trabalho.

Portanto, a solução para os comentários deve ser dividir o nível de zoom retornado pela escala da máquina em que você está atualmente.

Consegui obter a escala nas configurações do Windows fazendo o seguinte:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

Portanto, no caso do meu SP3, é assim que esse código parece 100% zoom:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

Multiplicar pelos 100 na resposta original do User1080381, em seguida, daria um zoom de 100 (%).

Atualmente, ele está funcionando, no entanto, ainda precisa se separar pelo navegador. Testado com sucesso no Chrome (75) e Safari (11.1) (ainda não encontrou caminho para FF). Ele também obtém o valor do zoom correto na exibição da retina e os cálculos são acionados no evento de redimensionamento.

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }

Aqui não muda!:

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

Crie um arquivo HTML simples, clique no botão. Independentemente do nível de zoom: ele mostrará a largura de 400px (pelo menos com o Firefox e o IE8)

Isso pode ou não ajudar ninguém, mas eu tinha uma página que não consegui centrar -se corretamente, não importa quais truques CSS eu tentei, então escrevi uma página de call center de arquivo jQuery:

O problema ocorreu com o nível de zoom do navegador, a página mudaria com base se você fosse 100%, 125%, 150%, etc.

O código abaixo está em um arquivo jQuery chamado CenterPage.js.

Na minha página, tive que vincular o jQuery e esse arquivo para obtê -lo, mesmo que minha página mestre já tivesse um link para o jQuery.

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js:

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

Além disso, se você deseja centralizar um painel:

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

Essa é a pergunta foi postada como séculos de volta, mas hoje quando eu estava procurando a mesma resposta "Como detectar o Zoom In and Out Event", não consegui encontrar uma resposta que se encaixasse em todos os navegadores.

Como agora: para o Firefox/Chrome/IE8 e IE9, o zoom dentro e fora dispara uma janela.Resize o evento. Isso pode ser capturado usando:

$(window).resize(function() {
//YOUR CODE.
});

Uma solução alternativa para o Firefox 16+ para encontrar DPPX (nível de zoom) puramente com JavaScript:

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);

function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

O problema está nos tipos de monitor utilizados, um monitor 4K versus monitor padrão. O Chrome é de longe o mais inteligente por poder nos dizer qual é o nível de zoom apenas usando window.devicePixelRatio, aparentemente, pode dizer qual é a densidade de pixels e os relatórios de volta o mesmo número para importar o quê.

Outros navegadores, nem tanto. IE e Edge são provavelmente os piores, pois lidam com os níveis de zoom de maneira muito diferente. Para obter o mesmo tamanho de texto em um monitor 4K, você deve selecionar 200%, em vez de 100% em um monitor padrão.

Em maio de 2018, aqui está o que tenho para detectar os níveis de zoom para alguns dos navegadores mais populares, Chrome, Firefox e IE11. Eu tenho que me diz qual é a porcentagem de zoom. Para o IE, ele relata 100% até para monitores 4K que estão na verdade em 200%, mas o tamanho do texto é realmente o mesmo.

Aqui está um violino: https://jsfiddle.net/ae1hdogr/

Se alguém gostaria de fazer uma facada em outros navegadores e atualizar o violino, faça -o. Meu principal objetivo era abordar esses três navegadores para detectar se as pessoas estavam usando um fator de zoom maior que 100% para usar meu aplicativo da Web e exibir um aviso sugerindo um fator de zoom do arrendador.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top