¿Puede JavaScript detectar el nivel de zoom del navegador? | Programar Plus

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 él, o que tomemos decisiones bien intencionadas pero con malos resultados basados ​​en esa información. Pero no veo ninguna evidencia de eso.

Las respuestas de StackOverflow pintan lo extraño que puede ser entre navegadores. Esta secuencia de comandos de 2013 me funciona en Chrome, pero no en Safari e informa incorrectamente en Firefox. Incluso si ese script funcionó, se basa en la detección de agentes de usuario (que no es mucho para este mundo) y algunos trucos increíblemente extraños.

Así que, por favor, no dudes en corregirme si me equivoco. pero creo que la respuesta es que realmente no podemos hacer esto en este momento.

Hay una cosa llamada API Visual Viewport

Estoy un poco confundido por eso.

  • La especificación es un borrador
  • La tabla de soporte muestra una gran cantidad de soporte
  • window.visualViewport está definido en Firefox, Safari y Chrome (escritorio)
  • Pero… window.visualViewport.scale es siempre 1 en Safari y Chrome, y undefined en 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 sobre el zoom de pellizco. Por lo tanto, tal vez no esté diseñado para los niveles de zoom del navegador de escritorio.

¿Qué es un caso de uso aquí?

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

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

Me gusta…

// Dunno if "resize" is best. I don't know what the "change zoom" event would be
window.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.devicePixelRatio y acercar, la densidad de píxeles en Chrome y Firefox aumentará a medida que se acerque y disminuirá a medida que se aleje. Teóricamente, 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, como en, permanece igual independientemente del zoom. Además, el nivel de zoom del sistema operativo puede afectar las cosas aquí, haciéndolo más complicado; sin mencionar que una página puede comenzar a un nivel ampliado, lo que puede alterar todo el cálculo desde el principio.