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

Para mí, para Chrome/Webkit, document.width / jQuery(document).width() no funcionó. Cuando hice mi ventana pequeña y me acerqué a mi sitio de tal manera que aparecían barras de desplazamiento horizontales, document.width / jQuery(document).width() no era igual a 1 en el zoom predeterminado. Esto se debe a que document.width incluye parte del documento fuera de la ventana.

Usando window.innerWidth y window.outerWidth funcionó. 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";
}

Puedes probar

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

Esto le dará el nivel de porcentaje de zoom del navegador.

Para capturar el evento de zoom puede usar

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

Mi compañero de trabajo y yo usamos el script de https://github.com/tombigel/detect-zoom. Además, también creamos dinámicamente un elemento svg y verificamos su propiedad currentScale. Funciona muy bien en Chrome y probablemente la mayoría de los navegadores también. En FF, la función "zoom solo texto" debe desactivarse. SVG es soportado en la mayoría de los navegadores. En el momento de escribir esto, probado en IE10, FF19 y Chrome28.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

Encontré este artículo enormemente útil. Muchísimas gracias a yonran. Quería transmitir algo de aprendizaje adicional que encontré mientras implementaba algunas de las técnicas que él proporcionó. En FF6 y Chrome 9, se agregó soporte para consultas de medios de JS, lo que puede simplificar en gran medida el enfoque de consulta de medios necesario para determinar el zoom en FF. Vea los documentos en MDN aquí. Para mis propósitos, solo necesitaba detectar si el navegador se acercó o alejó, no tenía necesidad del factor de zoom real. Me fue capaz de obtener mi respuesta con una línea de JavaScript:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

Combinando esto con las soluciones IE8+ y Webkit, que también eran líneas individuales, pude detectar zoom en la gran mayoría de los navegadores que golpeaban nuestra aplicación con solo unas pocas líneas de código.

zoom = ( window.outerWidth - 10 ) / window.innerWidth

Eso es todo lo que necesitas.

En Internet Explorer 7, 8 y 9, esto funciona:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

El "+0.9" se agrega para evitar errores de redondeo (de lo contrario, obtendría 104% y 109% cuando el zoom del navegador se establece en 105% y 110% respectivamente).

En IE6 el zoom no existe, por lo que no es necesario comprobar el zoom.

Esto ha funcionado muy bien para mí en los navegadores basados en webkit (Chrome, Safari):

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

No parece funcionar en Firefox sin embargo.

Esto también funciona en WebKit:

var zoomLevel = document.width / document.body.clientWidth;

Tengo una solución para esto a partir de enero de 2016. Probado en los navegadores Chrome, Firefox y MS Edge.

El principio es El siguiente. Recoge 2 puntos MouseEvent que están muy separados. Cada evento del ratón viene con coordenadas de pantalla y documento. Mida la distancia entre los 2 puntos en ambos sistemas de coordenadas. Aunque hay desplazamientos fijos variables entre los sistemas de coordenadas debido a los muebles del navegador, la distancia entre los puntos debe ser idéntica si el la página no está ampliada. La razón para especificar "lejos aparte" (pongo esto como 12 píxeles) es para que los pequeños cambios de zoom (por ejemplo, 90% o 110%) son detectables.

Referencia: https://developer.mozilla.org/en/docs/Web/Events/mousemove

Pasos:

1. Añadir un oyente de movimiento del ratón

   window.addEventListener("mousemove", function(event) {
       // handle event
   });
   

2. Captura 4 mediciones de eventos del ratón:

   event.clientX, event.clientY, event.screenX, event.screenY
   

3. Mida la distancia d_c entre los 2 puntos del cliente system

4. Mida la distancia d_s entre los 2 puntos en el sistema de pantalla

5. If d_c != d_s entonces se aplica zoom. La diferencia entre los dos te dice la cantidad de zoom.

N.B. Solo hacer los cálculos de distancia rara vez, por ejemplo, cuando se puede muestrear un nuevo evento del ratón que está lejos de la anterior.

Limitaciones: Asume que el usuario moverá el mouse al menos un poco, y el zoom es incognoscible hasta este momento.

Lo que se me ocurrió es :

1) Hacer un position:fixed <div> con width:100% (id=zoomdiv)

2) cuando se carga la página:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

Y funcionó para mí para ctrl+ y ctrl- zooms.

O puedo añadir la línea a un evento $(window).onresize() para obtener el nivel de zoom activo

Código:

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

P.D.: este es mi primer post, perdón por cualquier error

En los dispositivos mobile (con Chrome para Android u Opera Mobile) puede detectar zoom por la ventana .visualViewport.escala. https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

Detectar en Safari: documento.documentElement.clientWidth / window.innerWidth (devuelve 1 si no hay zoom en el dispositivo).

Sus cálculos todavía se basan en un número de píxeles CSS. Ahora tienen un tamaño diferente en la pantalla. Ese es el punto de zoom de página completa.

¿Qué le gustaría que sucediera en un navegador en un dispositivo de 192dpi que, por lo tanto, normalmente muestra cuatro píxeles de dispositivo por cada píxel en una imagen? Con un zoom del 50%, este dispositivo ahora muestra un píxel de imagen en un píxel de dispositivo.

No probó esto para IE, pero si haces un elemento elem con

min-width: 100%

Luego

window.document.width / elem.clientWidth

Le dará el nivel de zoom de su navegador (incluido el factor document.body.style.zoom).

Esto es para Chrome , a raíz de user800583 respuesta ...

Pasé unas horas en este problema y no he encontrado un mejor enfoque, pero :

• Hay 16 'zoomLevel' y no 10
• Cuando Chrome está a pantalla completa/maximizado la relación es window.outerWidth/window.innerWidth, y cuando no lo es, la relación parece ser (window.outerWidth-16)/window.innerWidth, sin embargo, el 1er caso puede ser abordado por el 2do.

Así que llegué a lo siguiente ...

Pero este enfoque tiene limitaciones: por ejemplo, si toca el acordeón con la ventana de la aplicación (ampliar rápidamente y reducir el ancho de la ventana), entonces obtendrá espacios entre los niveles de zoom, aunque el zoom no ha cambiado (puede ser outerWidth y innerWidth no se actualizan exactamente al mismo tiempo).

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

Y si quieres el factor:

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

Tengo esta solución para solo móvil (probado con Android):

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

Si desea el nivel de zoom justo después del movimiento de pellizco, probablemente tendrá que establecer un poco de tiempo de espera debido al retraso de renderizado (pero no estoy seguro porque no lo probé).

function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

Básicamente, tenemos:

• window.devicePixelRatio que tiene en cuenta tanto el zoom a nivel de navegador* como el zoom del sistema/densidad de píxeles.
  * - en Mac/Safari el nivel de zoom no se tiene en cuenta
• consultas de medios
• vw/vh Unidades CSS
• resize el evento, que se activa al cambiar el nivel de zoom, causa cambios en el tamaño efectivo de la ventana

Eso debería ser suficiente para UX normal. Si necesita detectar el nivel de zoom que podría ser una señal de diseño de interfaz de usuario mal.

El Pitch-zoom es más difícil de rastrear y no se considera actualmente.

Esta respuesta se basa en comentarios sobre devicePixelRatio que regresan incorrectamente en la respuesta de user1080381.

Descubrí que este comando también regresaba incorrectamente en algunos casos cuando trabajaba con un escritorio, Surface Pro 3 y Surface Pro 4.

Lo que encontré es que funcionaba en mi escritorio, pero el SP3 y el SP4 estaban dando números diferentes entre sí y el escritorio.

Sin embargo, me di cuenta de que el SP3 estaba regresando como 1 y media veces el nivel de zoom I estaba esperando. Cuando eché un vistazo a la configuración de la pantalla, el SP3 estaba realmente configurado en 150% en lugar del 100% que tenía en mi escritorio.

Por lo tanto, la solución a los comentarios debe ser dividir el nivel de zoom devuelto por la escala de la máquina en la que se encuentra actualmente.

Pude obtener la escala en la configuración de Windows haciendo lo siguiente:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

Así que en el caso de mi SP3, así es como este código se ve 100% zoom:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

Multiplicando por el 100 en la respuesta original de user1080381 le daría un zoom de 100 (%).

El problema radica en los tipos de monitor utilizados, un monitor 4k vs monitor estándar. Chrome es, con mucho, el más inteligente en ser capaz de decirnos lo que el nivel de zoom es solo mediante el uso de window.devicePixelRatio, al parecer, puede decir lo que la densidad de píxeles es y los informes de nuevo el mismo número de importar qué.

Otros navegadores, no tanto. IE y Edge son probablemente los peores, ya que manejan los niveles de zoom de manera muy diferente. Para obtener el mismo tamaño de texto en un monitor 4k, debe seleccionar 200%, en lugar de 100% on un monitor estándar.

A partir de mayo de 2018, esto es lo que tengo que detectar niveles de zoom para algunos de los navegadores más populares, Chrome, Firefox e IE11. Tengo que decirme cuál es el porcentaje de zoom. Para IE, informa al 100% incluso para monitores 4k que en realidad están al 200%, pero el tamaño del texto es realmente el mismo.

Aquí hay un violín: https://jsfiddle.net/ae1hdogr /

Si alguien quiere apuñalar a otros navegadores y actualizar el violín, por favor hágalo. Mi el objetivo principal era conseguir estos 3 navegadores cubiertos para detectar si las personas estaban utilizando un factor de zoom superior al 100% para utilizar mi aplicación web y mostrar un aviso que sugiere un factor de zoom arrendador.

Aquí no cambia!:

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

Cree un archivo html simple, haga clic en el botón. independientemente del nivel de zoom: le mostrará el ancho de 400px (al menos con firefox e ie8)

Esto puede o no puede ayudar a nadie, pero tenía una página que no podía llegar al centro correctamente, no importa qué trucos Css intenté, así que escribí un archivo jQuery call Center Page:

El problema ocurrió con el nivel de zoom del navegador, la página se desplazaría en función de si fuera 100%, 125%, 150%, etc.

El siguiente código está en un archivo jQuery llamado centerpage.js.

Desde mi página tuve que enlazar a jQuery y este archivo para que funcione, a pesar de que mi página maestra ya tenía un enlace a jQuery.

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js:

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

También si desea centrar un panel:

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

Esta es la pregunta se publicó como hace siglos, pero hoy cuando estaba buscando la misma respuesta "Cómo detectar zoom en y fuera de evento", no pude encontrar una respuesta que se ajuste a todos los navegadores.

Como ahora : Para Firefox/Chrome/IE8 e IE9 , el zoom dentro y fuera dispara una ventana.cambiar el tamaño del evento. Esto se puede capturar usando:

$(window).resize(function() {
//YOUR CODE.
});

Una solución para FireFox 16 + para encontrar DPPX (nivel de zoom) puramente con JavaScript:

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);