eventos - javascript resize event

Ver el evento "zoom" del navegador en JavaScript

Question

¿Es posible detectar, usando JavaScript, cuando el usuario cambia el zoom en una página? Simplemente quiero capturar un evento de "zoom" y responder a él (similar al evento window.onresize).

Gracias.

Answer 1

Buenas noticias todo el mundo ¡algunas personas! Los navegadores más nuevos activarán un evento de cambio de tamaño de la ventana cuando se cambie el zoom.

Answer 2

En iOS 10, es posible agregar un detector de eventos al evento touchmove y detectar si la página está ampliada con el evento actual.

var prevZoomFactorX;
var prevZoomFactorY;
element.addEventListener("touchmove", (ev) => {
let zoomFactorX = document.documentElement.clientWidth / window.innerWidth;
let zoomFactorY = document.documentElement.clientHeight / window.innerHeight;
let pageHasZoom = !(zoomFactorX === 1 && zoomFactorY === 1);
if(pageHasZoom) {
// page is zoomed
if(zoomFactorX !== prevZoomFactorX || zoomFactorY !== prevZoomFactorY) {
// page is zoomed with this event
}
}
prevZoomFactorX = zoomFactorX;
prevZoomFactorY = zoomFactorY;
});

Answer 3

Esto funciona para mí:

 var deviceXDPI = screen.deviceXDPI;
setInterval(function(){
if(screen.deviceXDPI != deviceXDPI){
deviceXDPI = screen.deviceXDPI;
... there was a resize ...
}
}, 500);

Solo es necesario en IE8. Todos los otros navegadores generan naturalmente un evento de cambio de tamaño.

Answer 4

Estoy respondiendo a un enlace de 3 años pero supongo que aquí hay una respuesta más aceptable,

Crear archivo .css como,

@media screen and (max-width: 1000px)
{
// things you want to trigger when the screen is zoomed
}

P.EJ:-

@media screen and (max-width: 1000px)
{
.classname
{
font-size:10px;
}
}

El código anterior hace que el tamaño de la fuente ''10px'' cuando la pantalla se amplía a aproximadamente 125%. Puede verificar el nivel de zoom diferente cambiando el valor de ''1000px''.

Answer 5

Estoy usando este fragmento de JavaScript para reaccionar a los "eventos" de Zoom.
Se sondea el ancho de la ventana. (Como se sugiere en esta página (a la que Ian Elliott se vinculó): http://novemberborn.net/javascript/page-zoom-ff3 [archive] )

Probado con Chrome, Firefox 3.6 y Opera, no 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);
})();

Answer 6

Hay un plugin ingenioso construido de yonran que puede hacer la detección. Aquí está su pregunta previamente answered en . 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 7

Me gustaría sugerir una mejora a la solución anterior con seguimiento de cambios en el ancho de la ventana. En lugar de mantener su propia variedad de oyentes de eventos, puede usar el sistema de eventos javascript existente y activar su propio evento al cambiar el ancho, y vincular los manejadores de eventos a él.

$(window).bind(''myZoomEvent'', function() { ... });
function pollZoomFireEvent()
{
if ( ... width changed ... ) {
$(window).trigger(''myZoomEvent'');
}
}

Throttle/debounce puede ayudar a reducir la tasa de llamadas de su controlador.

Answer 8

No hay forma de detectar activamente si hay un zoom. Encontré una buena entrada aquí sobre cómo puedes intentar implementarla.

He encontrado dos formas de detectar el nivel de zoom. Una forma de detectar los cambios de nivel de zoom se basa en el hecho de que los valores porcentuales no están ampliados. 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 obtienes 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á haciendo más o menos conjeturas sobre si la página se amplió o no. Esto funcionará mejor en algunos navegadores que en otros.

No hay forma de saber si la página está ampliada si cargan su página mientras se amplía.

Answer 9

También puede obtener los eventos de cambio de tamaño de texto y el factor de zoom inyectando un div que contenga al menos un espacio no rompible (posiblemente, oculto), y verifique regularmente su altura. Si la altura cambia, el tamaño del texto ha cambiado, (y usted sabe cuánto - esto también se dispara, por cierto, si la ventana se acerca en el modo de página completa, y aún obtendrá el factor de zoom correcto, con la misma altura / relación de altura).

Answer 10

<script>
var zoomv = function() {
if(topRightqs.style.width==''200px){
alert ("zoom");
}
};
zoomv();
</script>