Capture el evento de "zoom" del navegador en JavaScript
¿Es posible detectar, usando JavaScript, cuando el usuario cambia el zoom en una página? Simplemente quiero captar un evento de "zoom" y responderle (similar al evento window.onresize).
Gracias.
No hay forma de detectar activamente si hay un zoom. Encontré una buena entrada aquí sobre cómo intentar implementarlo.
Encontré dos formas de detectar el nivel de zoom. Una forma de detectar cambios en el nivel de zoom se basa en el hecho de que los valores porcentuales no se amplían. Un valor porcentual es relativo al ancho de la ventana gráfica y, por lo tanto, no se ve afectado por el zoom de la página. Si inserta dos elementos, uno con una posición en porcentajes y otro con la misma posición en píxeles, se separarán cuando se amplíe la página. Encuentra la relación entre las posiciones de ambos elementos y tendrás el nivel de zoom. Ver caso de prueba. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3
También puedes hacerlo usando las herramientas de la publicación anterior. El problema es que estás haciendo más o menos conjeturas fundamentadas sobre si la página se ha ampliado o no. Esto funcionará mejor en algunos navegadores que en otros.
No hay forma de saber si la página está ampliada si la cargan mientras está ampliada.
Definamos px_ratio como se muestra a continuación:
Relación de px = relación de píxel físico a px css.
Si alguien hace zoom en la página, los px de la ventana gráfica (px es diferente de píxel) se reducen y deben ajustarse a la pantalla, por lo que la proporción (píxel físico/CSS_px) debe aumentar.
pero al cambiar el tamaño de la ventana, el tamaño de la pantalla se reduce al igual que los px. entonces la proporción se mantendrá.
zoom: activa el evento windows.resize --> y cambia px_ratio
pero
cambio de tamaño: activa el evento windows.resize --> no cambia px_ratio
//for zoom detection
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
$(window).resize(function(){isZooming();});
function isZooming(){
var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
if(newPx_ratio != px_ratio){
px_ratio = newPx_ratio;
console.log("zooming");
return true;
}else{
console.log("just resizing");
return false;
}
}
El punto clave es la diferencia entre CSS PX y Physical Pixel.
https://gist.github.com/abilogos/66aba96bb0fb27ab3ed4a13245817d1e
Buenas noticiastodos¡algunas personas! Los navegadores más nuevos activarán un evento de cambio de tamaño de ventana cuando se cambie el zoom.
Estoy usando esta pieza de JavaScript para reaccionar a los "eventos" de Zoom.
Sondea el ancho de la ventana. (Como se sugiere en cierta medida en esta página (a la que Ian Elliott vinculó): http://novemberborn.net/javascript/page-zoom-ff3 [archivo] )
Probado con Chrome, Firefox 3.6 y Opera, no con IE.
Saludos, Magnus
var zoomListeners = [];
(function(){
// Poll the pixel width of the window; invoke zoom listeners
// if the width has been changed.
var lastWidth = 0;
function pollZoomFireEvent() {
var widthNow = jQuery(window).width();
if (lastWidth == widthNow) return;
lastWidth = widthNow;
// Length changed, user must have zoomed, invoke listeners.
for (i = zoomListeners.length - 1; i >= 0; --i) {
zoomListeners[i]();
}
}
setInterval(pollZoomFireEvent, 100);
})();
