Neste artigo você vai aprender a como detectar o zoom da página com JavaScript, utilizando uma simples instrução.
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
O que vamos precisar para detectar o zoom é uma propriedade de window, o nosso objeto global
Esta propriedade é chamada de devicePixelRatio, e ao multiplicarmos por 100 temos o zoom aproximado
Para ter este valor de forma mais exata, utilizaremos o método floor do objeto Math
Veja um trecho de código na prática:
const zoomLevel = Math.round(window.devicePixelRatio * 100); console.log(zoomLevel)
Na primeira linha resgatamos o valor da propriedade
E depois, nós imprimimos o valor, que é um número inteiro
O valor padrão é 100, ou seja, quando não há zoom, nem que diminua a página e nem que aumente os elementos
Note que você pode atrelar isso a uma checagem if, para fazer alguma coisa com a resposta
Deixe um comentário contando o que achou desta solução 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
No artigo de hoje você viu como detectar o zoom da página com JavaScript
Utilizamos uma propriedade do objeto window, chamada de devicePixelRatio
A partir dela é possível descobrir se o navegador está com zoom ou não
Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!
como pego sempre o valor atualizado do zoom, por exemplo estou com a aplicação em 100%, mas aumento o zoom em 110%, a partir dai, essa constante vai manter o valor de 100% vai apenas pegar o 110 quando realizar um refresh. Minha pergunta é como o valor do zoom em tempo real?