¿Cómo detectar el nivel de zoom de la página en todos los navegadores modernos?

Hola, tenemos la respuesta a lo que necesitas, desplázate y la encontrarás más abajo.

Solución:

Ahora es un lío aún mayor de lo que era cuando se hizo esta pregunta por primera vez. Después de leer todas las respuestas y publicaciones de blog que pude encontrar, aquí hay un resumen. También configuré esta página para probar todos estos métodos de medición del nivel de zoom.

Editar (2011-12-12): Agregué un proyecto que se puede clonar: https://github.com/tombigel/detect-zoom

• IE8: screen.deviceXDPI / screen.logicalXDPI (o, para el nivel de zoom relativo al zoom predeterminado, screen.systemXDPI / screen.logicalXDPI)
• IE7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (gracias a este ejemplo o esta respuesta)
• SOLO FF3.5: screen.width / media query screen width (ver más abajo) (aprovecha el hecho de que screen.width usa píxeles del dispositivo, pero el ancho de MQ usa píxeles CSS, gracias a los anchos de Quirksmode)
• FF3.6: ningún método conocido
• FF4 +: búsqueda binaria de consultas de medios (ver más abajo)
• WebKit: https://www.chromestatus.com/feature/5737866978131968 (gracias a Teo en los comentarios)
• WebKit: mide el tamaño preferido de un div con -webkit-text-size-adjust:none.
• WebKit: (roto desde r72591) document.width / jQuery(document).width() (gracias a Dirk van Oosterbosch arriba). Para obtener la proporción en términos de píxeles del dispositivo (en lugar de en relación con el zoom predeterminado), multiplique por window.devicePixelRatio.
• ¿WebKit antiguo? (inconfirmado): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (de esta respuesta)
• Ópera: document.documentElement.offsetWidth / ancho de un position:fixed; width:100% div. desde aquí (la tabla de anchos de Quirksmode dice que es un error; innerWidth debería ser CSS px). Usamos la posición: elemento fijo para obtener el ancho de la ventana gráfica. incluido el espacio donde están las barras de desplazamiento; document.documentElement.clientWidth excluye este ancho. Esto está roto desde algún momento de 2011; Ya no conozco la forma de obtener el nivel de zoom en Opera.
• Otro: Solución flash de Sebastian
• No confiable: escuche los eventos del mouse y mida el cambio en screenX / change en clientX

Aquí hay una búsqueda binaria para Firefox 4, ya que no conozco ninguna variable donde esté expuesta:

Dummy element to test media queries.

Puedes probar

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

Esto le dará el nivel de porcentaje de zoom del navegador en pantallas que no sean Retina. Para pantallas de alta DPI / retina, arrojaría valores diferentes (por ejemplo, 200 para Chrome y Safari, 140 para Firefox).

Para capturar el evento de zoom, puede usar

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

Para mí, para Chrome / Webkit, document.width / jQuery(document).width() no funcionó. Cuando hice mi ventana pequeña y amplié mi sitio de tal manera que aparecieron barras de desplazamiento horizontales, document.width / jQuery(document).width() no era igual a 1 con el zoom predeterminado. Esto es porque document.width incluye parte del documento fuera de la ventana gráfica.

Utilizando window.innerWidth y window.outerWidth trabajó. Por alguna razón, en Chrome, outerWidth se mide en píxeles de pantalla y innerWidth se mide en píxeles 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";

Calificaciones y comentarios

Recuerda que tienes la capacidad de decir si te fue útil.

---

---

Utiliza Nuestro Buscador