¿Cómo determino programáticamente el nivel de zoom actual de una ventana del navegador?

Question

Quiero saber el nivel de zoom de lo que se muestra en una ventana del navegador según el javascripts' window object properties al que tengo acceso. Parece que no puedo encontrar la fórmula matemática correcta para el zoom en función del ancho interior, el desplazamiento de página, etc. Encontré una solución, pero eso usa la llamada document.body.getBoundingClientRect que no devuelve nada en mi caso y por lo que no puedo decir si hay un reemplazo adecuado de las propiedades de la ventana. Estoy usando Safari.

Answer 1

Se puede determinar el nivel de zoom mediante la comparación de diversas propiedades de document.documentElement.clientWidth dependiendo de su navegador:

• vs window.outerWidth (sobre el Opera)
• vs document.defaultView.getComputedStyle(document.documentElement, null).width (en Safari, Chrome)
• o comparar screen.deviceXDPI y screen.logicalXDPI (en IE8).

La relación de estos valores es el nivel de zoom actual (por ejemplo, una relación de 2 indica un zoom de 200%).

Answer 2

Aquí hay un enfoque aproximado que determina la relación de zoom al observar la diferencia entre el ancho interno y disponible de la ventana (con y sin la barra de desplazamiento), y lo compara con el ancho de la barra de desplazamiento con una relación del 100%. Actualmente depende de jquery, y se debe hacer un poco más de trabajo para calcular el ancho exacto de la barra de desplazamiento para varios navegadores (actualmente solo usa 15 píxeles, que parece ser la norma).

function getZoom(){ 

    var ovflwTmp = $('html').css('overflow'); 
    $('html').css('overflow','scroll'); 

    var viewportwidth; 
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth; 
    } else if (typeof(document.documentElement) != 'undefined' && 
     typeof document.documentElement.clientWidth != 'undefined' && 
     document.documentElement.clientWidth != 0) { 
     // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
     viewportwidth = document.documentElement.clientWidth; 
    } else { 
     // older versions of IE 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
    } 

    var windW = $(window).width(); 
    var scrollBarW = viewportwidth - windW; 

    if(!scrollBarW) return 1; 

    $('html').css('overflow',ovflwTmp); 

    return (15/scrollBarW); 
} 

Si bien esto no es perfecto, es lo mejor que he podido para llegar hasta el momento para este tipo de cosas. Actualmente lo estoy usando para saber cuándo publicar imágenes de alta resolución, si el usuario ha aumentado el zoom hasta el punto de hacer que se vean borrosas.