navegador name internet how detectar datos javascript browser zoom detection

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



how to detect a browser using javascript (23)

Ahora es un desastre aún mayor de lo que era cuando se hizo esta pregunta por primera vez. Después de leer todas las respuestas y publicaciones de blog que pude encontrar, aquí hay un resumen. También configuré esta página para probar todos estos métodos de medición del nivel de zoom .

Editar (2011-12-12): He agregado un proyecto que se puede clonar: https://github.com/tombigel/detect-zoom

  • IE8 : screen.deviceXDPI / screen.logicalXDPI (o, para el nivel de zoom relativo al zoom predeterminado, screen.systemXDPI / screen.logicalXDPI )
  • IE7 : var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (Gracias a este ejemplo o esta respuesta )
  • SÓLO FF3.5 : ancho de pantalla de ancho de pantalla de ancho de pantalla / pantalla (ver más abajo) (aprovecha el hecho de que screen.width usa píxeles del dispositivo pero ancho de MQ usa píxeles de CSS, gracias a los anchos de Quirksmode )
  • FF3.6 : no se conoce método
  • FF4 + : búsquedas binarias en los medios de comunicación (ver más abajo)
  • WebKit : https://www.chromestatus.com/feature/5737866978131968 (gracias a Teo en los comentarios)
  • WebKit : mide el tamaño preferido de un div con -webkit-text-size-adjust:none .
  • WebKit : (roto desde r72591 ) document.width / jQuery(document).width() (gracias a Dirk van Oosterbosch arriba ). Para obtener la relación en términos de píxeles del dispositivo (en lugar de en relación con el zoom predeterminado), multiplique por window.devicePixelRatio .
  • ¿Webkit antiguo? (sin verificar): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (de esta respuesta )
  • Opera : document.documentElement.offsetWidth / width de una position:fixed; width:100% position:fixed; width:100% div. desde aquí ( la tabla de anchos de Quirksmode dice que es un error; innerWidth debería ser CSS px). Usamos la posición: elemento fijo para obtener el ancho de la ventana gráfica, incluido el espacio donde están las barras de desplazamiento ; document.documentElement.clientWidth excluye este ancho. Esto está roto desde algún momento en 2011; No conozco ninguna manera de obtener el nivel de zoom en Opera nunca más.
  • Otro : Solución flash de Sebastian
  • No confiable: escuche los eventos del mouse y mida el cambio en pantallaX / cambio en clientX

Aquí hay una búsqueda binaria de Firefox 4, ya que no conozco ninguna variable donde esté expuesta:

<style id=binarysearch></style> <div id=dummyElement>Dummy element to test media queries.</div> <script> var mediaQueryMatches = function(property, r) { var style = document.getElementById(''binarysearch''); var dummyElement = document.getElementById(''dummyElement''); style.sheet.insertRule(''@media ('' + property + '':'' + r + '') {#dummyElement '' + ''{text-decoration: underline} }'', 0); var matched = getComputedStyle(dummyElement, null).textDecoration == ''underline''; style.sheet.deleteRule(0); return matched; }; var mediaQueryBinarySearch = function( property, unit, a, b, maxIter, epsilon) { var mid = (a + b)/2; if (maxIter == 0 || b - a < epsilon) return mid; if (mediaQueryMatches(property, mid + unit)) { return mediaQueryBinarySearch( property, unit, mid, b, maxIter-1, epsilon); } else { return mediaQueryBinarySearch( property, unit, a, mid, maxIter-1, epsilon); } }; var mozDevicePixelRatio = mediaQueryBinarySearch( ''min--moz-device-pixel-ratio'', '''', a, b, maxIter, epsilon); var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch( ''min-device-width'', ''px'', 0, 6000, 25, .0001); </script>

  1. ¿Cómo puedo detectar el nivel de zoom de la página en todos los navegadores modernos? Si bien este thread le indica cómo hacerlo en IE7 e IE8, no puedo encontrar una buena solución para varios navegadores.

  2. Firefox almacena el nivel de zoom de la página para futuros accesos. En la primera carga de la página, ¿podré obtener el nivel de zoom? En algún lugar donde leo, funciona cuando se produce un cambio de zoom después de cargar la página.

  3. ¿Hay alguna manera de atrapar el evento ''zoom'' ?

Necesito esto porque algunos de mis cálculos están basados ​​en píxeles y pueden fluctuar cuando se amplía.

Muestra modificada dada por @tfl

Esta página alerta sobre diferentes valores de altura cuando se amplía. [jsFiddle]

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script> </head> <body> <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div> <button onclick="alert($(''#xy'').height());">Show</button> </body> </html>

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>

crear 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 y ie8)

Básicamente, tenemos:

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

Eso debería ser suficiente para UX normal . Si necesita detectar un nivel de zoom que podría ser un signo de mal diseño de la interfaz de usuario.

El zoom de tono es más difícil de seguir y no se considera actualmente.

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 poder decirnos cuál es el nivel de zoom con solo usar window.devicePixelRatio , al parecer puede decir cuál es la densidad de píxeles y reporta el mismo número para 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% en un monitor estándar.

A partir de mayo de 2018, esto es lo que tengo que detectar los 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 del 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 desea probar otros navegadores y actualizar el violín, por favor, hágalo. Mi objetivo principal era cubrir estos 3 navegadores para detectar si las personas estaban usando un factor de zoom superior al 100% para usar mi aplicación web y mostrar un aviso que sugiere un factor de zoom menor.

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(); }

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

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

Esta pregunta fue publicada hace siglos, pero hoy, cuando buscaba la misma respuesta "Cómo detectar un evento de acercamiento y alejamiento", no pude encontrar una respuesta que se ajustara a todos los navegadores.

Como ahora: para Firefox / Chrome / IE8 e IE9, el acercamiento y alejamiento dispara un evento window.resize. Esto puede ser capturado usando:

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

Esta respuesta se basa en comentarios sobre devicePixelRatio que regresan incorrectamente en la respuesta del usuario1080381.

Descubrí que este comando regresaba de forma incorrecta en algunos casos también al trabajar con un escritorio, Surface Pro 3 y Surface Pro 4.

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

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

Por lo tanto, la solución a los comentarios debería 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;

Entonces, en el caso de mi SP3, este es el aspecto que tiene este código al 100% del zoom:

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

Multiplicar por 100 en la respuesta original de user1080381 y luego le daría un zoom de 100 (%).

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

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

  • Hay 16 ''zoomLevel'' y no 10
  • Cuando Chrome está en pantalla completa / maximizada, la proporción es window.outerWidth/window.innerWidth , y cuando no lo está, la proporción parece ser (window.outerWidth-16)/window.innerWidth , sin embargo el primer caso puede ser abordado por el segundo uno.

Entonces vine a lo siguiente ...

Pero este enfoque tiene limitaciones: por ejemplo, si toca el acordeón con la ventana de la aplicación (amplíe y reduzca rápidamente el ancho de la ventana), obtendrá espacios entre los niveles de zoom, aunque el zoom no haya cambiado (puede ser exterior). exactamente actualizado 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 ] );

Esto me ha funcionado muy bien en 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; }

Aunque no parece funcionar en Firefox.

Esto también funciona en WebKit:

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

Esto puede o no puede ayudar a nadie, pero tuve una página que no pude centrar correctamente sin importar los trucos de Css que probé, así que escribí una página del centro de llamadas del archivo JQuery:

El problema ocurrió con el nivel de zoom del navegador, la página cambiaría según si fuera 100%, 125%, 150%, etc.

El código a continuación se encuentra en un archivo JQuery llamado centerpage.js.

Desde mi página tuve que enlazar con JQuery y este archivo para que funcionara, 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 quieres 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); } }

He encontrado este artículo enormemente útil. Muchísimas gracias a yonran. Quería transmitir algo de aprendizaje adicional que encontré al implementar algunas de las técnicas que proporcionó. En FF6 y Chrome 9, se agregó soporte para consultas de medios desde JS, lo que puede simplificar enormemente el enfoque de consulta de medios necesario para determinar el zoom en FF. Vea los documentos en MDN here . Para mis propósitos, solo necesitaba detectar si el navegador estaba acercado o alejado, no necesitaba el factor de zoom real. Pude 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 simples, pude detectar el zoom en la gran mayoría de los navegadores que golpean nuestra aplicación con solo unas pocas líneas de código.

Lo que se me ocurrió es:

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

2) cuando la página se carga:

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

Y me funcionó para ctrl+ y ctrl- zooms.

o puedo agregar 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>

PD: este es mi primer post, perdona cualquier error.

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. Sin embargo, en FF, la función "solo texto de zoom" debe estar desactivada. SVG es supported con la mayoría de los navegadores. En el momento de escribir este artículo, se probó 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);

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

min-width: 100%

entonces

window.document.width / elem.clientWidth

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

Para mí, para Chrome / Webkit, document.width / jQuery(document).width() no funcionó. Cuando hice mi ventana pequeña y amplié mi sitio de manera que aparecieran 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 gráfica.

Usando window.innerWidth y window.outerWidth funcionó. Por alguna razón en Chrome, el ancho exterior se mide en píxeles de la pantalla y el ancho interno 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 te dará el nivel de porcentaje de zoom del navegador.

Para atrapar el evento de zoom puedes usar

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

Sus cálculos todavía se basan en una serie de píxeles CSS. Son solo un tamaño diferente en la pantalla ahora. Ese es el punto de zoom de página completa.

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

Tengo esta solución solo para móviles (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 pequeño tiempo de espera debido a la demora de la representación (pero no estoy seguro porque no lo probé).

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

El principio es el siguiente. Recoge 2 puntos de Evento del Ratón que están muy separados. Cada evento del ratón viene con pantalla y coordenadas del documento. Medir la distancia entre los 2 puntos en ambos sistemas de coordenadas. Aunque existen compensaciones fijas variables entre los sistemas de coordenadas debido a los muebles del navegador, la distancia entre los puntos debe ser idéntica si la página no está ampliada. La razón para especificar "lejos" (lo puse como 12 píxeles) es para que se puedan detectar pequeños cambios de zoom (por ejemplo, 90% o 110%).

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

Pasos:

  1. Agregar un detector de movimientos del mouse

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

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

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

  3. Mida la distancia d_c entre los 2 puntos en el sistema cliente

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

  5. Si d_c! = D_s entonces se aplica el zoom. La diferencia entre los dos te dice la cantidad de zoom.

NB Solo haga los cálculos de distancia raramente, por ejemplo, cuando puede muestrear un nuevo evento de ratón que está lejos del anterior.

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

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);

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; };

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

Eso es todo lo que necesitas.