¿Puede JavaScript detectar el nivel de zoom del navegador?

No en realidad no.

Mi primera suposición fue que esto no se expuso intencionalmente en los navegadores porque los navegadores intencionalmente no quieren que luchemos contra esto, o que tomemos decisiones bien intencionadas pero con malos resultados basadas en esa información. Pero no veo ninguna evidencia de eso.

Las respuestas de StackOverflow muestran lo extraño que puede ser entre navegadores. Este script de 2013 me funciona en Chrome, pero no en Safari y reporta incorrectamente en Firefox. Incluso si ese script funcionara, depende de la detección del agente de usuario (que no es largo para este mundo) y de algunos trucos increíblemente extraños.

Así que, por favor, siéntete libre de corregirme si me equivoco, pero creo que la respuesta es que realmente no podemos hacer esto ahora.

Hay algo llamado Visual Viewport API

Estoy un poco confundido por eso.

• La especificación es un borrador.
• La tabla de soporte enumera mucho soporte.
• window.visualViewportestá definido en Firefox, Safari y Chrome (escritorio)
• Pero… window.visualViewport.scalesiempre está 1en Safari y Chrome, y undefineden Firefox. En otras palabras: inútil.

No sé del todo si se supone que eso representa con precisión el nivel de zoom del navegador, porque la especificación habla específicamente de pinch-zoom . Entonces, tal vez simplemente no esté destinado a los niveles de zoom del navegador de escritorio.

¿Cuál es un caso de uso aquí?

Un tipo me explicó una situación como esta:

Quería usar una cuadrícula CSS para diseñar las parcelas del cementerio (ya es interesante), como un plano de arriba hacia abajo de un cementerio. Había mucha información en el diseño. Si lo “alejaran” para poder ver todo el cementerio en una página, el texto en cada área sería demasiado pequeño para leer (ya que el tamaño del tipo de letra tendría que caber dentro de las cajas/tumbas). Idealmente, la página ocultaría ese texto mientras el navegador está alejado (tal vez una .hide-textclase). Cuando se amplía lo suficiente, el texto se muestra nuevamente.

Como…

// Dunno if "resize" is best. I don't know what the "change zoom" event would bewindow.visualViewport.addEventListener("resize", viewportHandler);function viewportHandler(event) {  // NOTE: This doesn't actually work at time of writing  if (event.target.scale  3) {    document.body.classList.remove("hide-text");    } else {    document.body.classList.add("hide-text");  }}

Hay densidad de píxeles…

Ben Nadel escribió recientemente en su blog: Observando cómo el zoom del navegador afecta las consultas de medios CSS y la densidad de píxeles .

Si miras window.devicePixelRatioy acercas, la densidad de píxeles en Chrome y Firefox aumentará a medida que acercas y disminuirá a medida que alejas. En teoría, podría probar el valor original (podría comenzar en diferentes lugares para usuarios con diferentes pantallas) y usar cambios en ese valor para adivinar el zoom. Pero… en Safari no hace nada, ya que permanece igual independientemente del zoom. Además, el nivel de zoom del sistema operativo puede afectar las cosas aquí, haciéndolo aún más complicado; sin mencionar que una página podría comenzar en un nivel ampliado, lo que podría alterar todo el cálculo desde el principio.