Detecta cambio de zoom de página con jQuery en Safari

Question

Tengo un problema con Safari en una aplicación web que contiene una posición: elemento fijo. Cuando la página se aleja (más pequeña al 100%) las cosas se rompen y deberían corregirse llamando a una función. Entonces me gustaría detectar el zoom del usuario. He encontrado esta jQueryPlug-in hace un tiempo:

http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/

http://mlntn.com/demos/jquery-zoom/

detecta eventos de teclado y ratón que podrían conducir a un cambio de página nivel de zoom. Lo suficientemente justo. Funciona en FF e IE actuales, pero no en Safari. ¿Alguna idea de qué se podría hacer para hacer algo similar en los navegadores WebKit actuales?

Answer 1

No es un duplicado directo de this question ya que se trata de Mobile Safari, pero la misma solución funcionará.

Al acercar el zoom, window.innerWidth se ajusta, pero document.documentElement.clientWidth no es, por lo tanto:

var zoom = document.documentElement.clientWidth/window.innerWidth; 

Además, debe ser capaz de utilizar el manejador de eventos onresize (o de .resize() jQuery) para comprobar si hay esto:

var zoom = document.documentElement.clientWidth/window.innerWidth; 
$(window).resize(function() { 
    var zoomNew = document.documentElement.clientWidth/window.innerWidth; 
    if (zoom != zoomNew) { 
     // zoom has changed 
     // adjust your fixed element 
     zoom = zoomNew 
    } 
}); 

Answer 2

hay un plugin ingenioso construido a partir de yonran que puede hacer la detección Aquí está su pregunta anterior answered en StackOverflow. Funciona para la mayoría de los navegadores. La aplicación es tan simple como esto:

window.onresize = function onresize() { 
    var r = DetectZoom.ratios(); 
    zoomLevel.innerHTML = 
    "Zoom level: " + r.zoom + 
    (r.zoom !== r.devicePxPerCssPx 
     ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx 
     : ""); 
} 

Demo

Answer 3

srceen.width es un valor fijo, pero donde como valor window.innerWidth cambiará de acuerdo con el efecto de zoom. por favor trate el código de abajo:

$(window).resize(function() { 
    if(screen.width == window.innerWidth){ 
     alert("you are on normal page with 100% zoom"); 
    } else if(screen.width > window.innerWidth){ 
     alert("you have zoomed in the page i.e more than 100%"); 
    } else { 
     alert("you have zoomed out i.e less than 100%"); 
    } 
});