Como detectar o zoom da página com JavaScript

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!