4

¿Cómo podría capturar el evento ya sea con el teclado o con el navegador, digamos que cuando alguien le haga zoom a mi página ya sea con combinación de teclado o con el botón del navegador me levante una alerta ?

Más claro: o sea, que al darle zoom me levante una alerta con JQuery

3 respuestas 3

3

Con la libreria jquery de la siguiente manera:

EDIT

De esta manera por lo menos en chrome funciona la deteccion de zoom, sin que haya problemas con el resize de la ventana. Habría que ver en otros dispositivos/browsers.

var pixel_ratio = window.devicePixelRatio;
$(window).resize(function() {
    if(pixel_ratio!=window.devicePixelRatio){
      pixel_ratio=window.devicePixelRatio
      console.log("cambio el zoom");//cambiar lor alert, lo dejo porque es mas facil para testear
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


También existe esta libreria pero está sin actualizaciones desde hace varios años.

1
  • Le hice una modificacion al script, esta comentado en la respuesta el 12 ene. 2018 a las 19:13
2

Quizá podría realizar esto escuchando el evento resize de un iframe oculto en lugar de window , ya que este último se lanzará el evento al cambiar el tamaño de la ventana. Primo accedemos a contentWindow y cuando se produzca el zoom , lanzamos el trigger con el nombre del evento y las acciones que quiere que realice. Fuente (posiblemente tenga problemas de compatibilidad pero para mi funciona correctamente)

HTML

<iframe id="frame" style="width: 250px;visibility: hidden; border: solid 1px red;" ></iframe>

Js

var miframe= $('#frame')[0];
$(miframe.contentWindow).resize(function() {
    $(window).trigger('zoomPage');
});
$(window).on('zoomPage', function() {
    console.log("Zoom a la página :D" );
});
1

Comprueba el valor del devicePixelRatio de la ventana cada vez que la ventana cambie de tamaño. Según la documentación de MDN:

La propiedad de sólo-lectura Window.devicePixelRatio retorna la relación de tamaño (vertical) de un pixel físico en el dispositivo de visualización actual respecto del de un dispositivo de tamaño de pixel independiente (dips).

Entonces, si el tamaño de la ventana cambia y el pixel ratio cambia también, podrás afirmar que ha cambiado el nivel de zoom. Aquí dejo un ejemplo:

var pixelRatio = window.devicePixelRatio;

$(window).on("resize", function() {
  if (window.devicePixelRatio > pixelRatio) {
    console.log("Zoom IN");
    pixelRatio = window.devicePixelRatio;
  } else if (window.devicePixelRatio < pixelRatio) {
    console.log("Zoom OUT");
    pixelRatio = window.devicePixelRatio;
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Según caniuse.com, window.devicePixelRatio funciona con todos los navegadores modernos y con móviles (pero no para versiones antiguas de IE).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.