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

310

  1. ¿Cómo puedo detectar el nivel de zoom de la página en todos los navegadores modernos? Si bien este hilo dice 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 acceso futuro. En la primera carga de la página, ¿podría obtener el nivel de zoom? En algún lugar que leí funciona cuando ocurre un cambio de zoom después de cargar la página.

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

Necesito esto porque algunos de mis cálculos están basados ​​en píxeles y pueden fluctuar al hacer zoom.

Muestra modificada dada por @tfl

Esta página alerta diferentes valores de altura cuando se hace zoom. [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>
javascript  browser  zoom  detection 
— falta de comprensión
fuente
1
Básicamente quiero saber la dimensión de un DIV al 100% de zoom.
— comprensión
44
Básicamente, no hay forma de detectar el zoom en 2019 : he probado todas las soluciones a continuación en Chrome 78 en Mac Catalina y ninguna de ellas funcionó.
— collimarco

Respuestas:

274

Ahora es un desastre aún mayor que cuando se hizo esta pregunta por primera vez. Al 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 (12/12/2011): agregué 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;(gracias a este ejemplo o esta respuesta )
  • SOLO FF3.5 : screen.width/ ancho de pantalla de consulta de medios (ver más abajo) (aprovecha el hecho de que screen.widthusa píxeles de dispositivo pero el ancho de MQ usa píxeles de CSS - gracias a los anchos de Quirksmode )
  • FF3.6 : ningún método conocido
  • FF4 + : consulta de medios de búsqueda binaria (ver más abajo)
  • WebKit : https://www.chromestatus.com/feature/5737866978131968 (gracias a Teo en los comentarios)
  • WebKit : mida 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 proporción en términos de píxeles del dispositivo (en lugar de en relación con el zoom predeterminado), multiplique por window.devicePixelRatio.
  • Old WebKit? (sin verificar): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth(de esta respuesta )
  • Opera : document.documentElement.offsetWidth/ ancho de un 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 el elemento position: fixed 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; Ya no sé cómo obtener el nivel de zoom en Opera.
  • Otros : solución flash de Sebastian
  • No confiable: escuche los eventos del mouse y mida el cambio en la pantalla X / cambio en el cliente X

Aquí hay una búsqueda binaria para 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>
— yonran
fuente
1
Muy buen trabajo, aunque esto no funciona para mí en IE 8.0.7601.17514 (último). ¿Alguna posibilidad de resumir todo esto en una sola función getZoom () que funciona en todos los navegadores? ¿Quizás también se lance como un complemento jQuery? Buen trabajo de nuevo.
— ripper234
1
@yonran great plugin !, pero no funciona en IE9, debería serlo en zoom: screen.deviceXDPI / screen.logicalXDPI,lugar dezoom: screen.systemXDPI / screen.logicalXDPI,
— Daniel
1
@RobW, cuando escribí esto por primera vez para Firefox 4, Firefox no tenía matchMedia. Paul Irish también escribió un polyfill matchMedia similar que forma parte de Modernizr .
— yonran
77
¡Buenas noticias para todos! ¡Finalmente lo hicieron! Vieport API! chromestatus.com/feature/5737866978131968 Lo pruebo , ¡cosas geniales!
— Teo
3
La API de Viewport solo funciona para pinch-zoom; si hace zoom en el escritorio, dice que la escala es 1. @ Jason T Featheringham hay otras razones además de la "discriminación" para querer saber el nivel de zoom. El zoom se establece en todas las páginas para un dominio, pero es posible que desee manejarlo de manera diferente en una página de juego o una ventana emergente de extensión que en una página de ayuda.
— Pudica
61

Puedes probar

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

Esto le proporcionará un nivel de porcentaje de zoom del navegador en pantallas sin retina. Para pantallas de alta DPI / retina, produciría diferentes valores (por ejemplo, 200 para Chrome y Safari, 140 para Firefox).

Para capturar el evento de zoom, puede usar

$(window).resize(function() { 
// your code 
});
— usuario1080381
fuente
1
Funciona perfecto, también en dispositivos móviles. También es bastante interesante ver qué dispositivos móviles tienen qué devicePixelRatio. Esto también me ayudó mucho a cambiar un fixedelemento a un elemento absolutecolocado correctamente cuando se produce el evento de zoom o cuando devicePixelRatiocambia el valor inicial . ¡Perfecto! ¡¡Gracias!!
— lowtechsun
12
No funciona como se esperaba: devuelve 200 en Chrome en MacBook con retina cuando el navegador no hace zoom.
— Terite
19
Los navegadores con soporte para pantallas de DPI alto no darán el resultado esperado al usar dicha pantalla, ni Safari lo hará independientemente de la pantalla.
— Fredrik C
Para cualquiera que le importe, en IE esto solo funciona en IE11 (devolverá NaN en IE10 o inferior)
— scunliffe
3
Math.round(window.devicePixelRatio * 100)funciona en Chrome, IE, Edge y Firefox. Safari en iMac siempre devuelve 200.
— Super Jade
45

Para mí, para Chrome / Webkit, document.width / jQuery(document).width()no funcionó. Cuando hice que mi ventana fuera pequeña y amplié mi sitio de modo que aparecieran barras de desplazamiento horizontales, document.width / jQuery(document).width()no era igual a 1 en el zoom predeterminado. Esto es porquedocument.width incluye parte del documento fuera de la ventana gráfica.

Utilizando window.innerWidthy window.outerWidthtrabajado. Por alguna razón en Chrome, el ancho externo se mide en píxeles de 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";
}
— usuario800583
fuente
1
Muy agradable. Y si solo necesita saber si está ampliada o no en Chrome:isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— Brent Faust
1
Bueno, window.outerWidth también cambia con el zoom. Además, no en todos los sistemas operativos, el ancho del borde de la ventana es de 8 píxeles (incluso en el mismo sistema operativo, el diseño puede variar). Sin embargo, sugeriría restar 16, no 8, ya que tiene los bordes de la ventana dos veces. Además, algunos navegadores tienen un borde en su ventana de representación real (como FF) y otros no (Safari), pero incluso esto depende del sistema operativo que use el navegador (por ejemplo, Safari tiene un borde en Windows). Copia de seguridad del ancho interno inicial (por ejemplo, en la carga de la página) y usarlo para comparar funciona mejor, pero solo si el zoom inicial era 100% ...
— StanE
1
Salidas 0, no importa para mí (2017, feb).
— Tiberiu-Ionuț Stan
1
switchdeclaración puede ser mejor que muchas declaraciones de lo contrario.
— Edric
No funciona: solo probé en Chrome para Mac y siempre devuelve la misma proporción, independientemente del nivel de zoom
— collimarco
16

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 también en la mayoría de los navegadores. Sin embargo, en FF la función "solo texto de zoom" tiene que estar desactivada. SVG es compatible con la mayoría de los navegadores. Al 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);
— Arrendajo
fuente
Este método ahora siempre informa svg.currentScale = 1 en Firefox 29. Probablemente porque redimensionan las figuras de la pantalla completa en función del zoom, lo cual es un error . IE11 parece tener el mismo problema en el escritorio con la altura de la pantalla ajustada al dispositivo de ventana gráfica PixelRatio, que está bastante jodido.
— hexalys
11

Encontré este artículo enormemente útil. Muchas gracias a yonran. Quería transmitir algo de aprendizaje adicional que encontré mientras implementaba algunas de las técnicas que 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 estaba ampliado o reducido, 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.

— brianh
fuente
44
¿Podría proporcionar un código para detectar el zoom real mediante una consulta de medios?
— TN.
Intente usar solo "(ancho: <X> px) y (alto: <Y> px)" donde <X> y <Y> son window.innerWidth y window.innerHeight, respectivamente. Funciona incluso para cantidades muy pequeñas de zoom. Funciona en Safari también.
— max
@max ¿Puede proporcionar un código JSFIddle o de muestra de cómo se ve esto, por favor?
— lowtechsun
Siempre informa verdadero en dispositivos de retina como macbook pro.
— Matthew Sanders
codepen.io/anon/pen/LgrGjJ muestra una búsqueda binaria con consultas de medios, pero esto es lo mismo que consultar devicePixelRatio: tiene en cuenta la escala de visualización.
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

Eso es todo lo que necesitas.

— Alex von Thorn
fuente
¿Por qué restar 10de outerWidth?
— callum
Probablemente para la barra de desplazamiento. Cada barra de desplazamiento también es diferente, como en iOS es mucho más pequeña. Además, esta solución parece ser solo Chrome
— Sarah
1
No funciona si el usuario tiene una barra lateral como marcadores en FF
— Gerrit Sedlaczek
7

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 MouseEvent que están muy separados. Cada evento del mouse viene con coordenadas de pantalla y documento. Mida la distancia entre los 2 puntos en ambos sistemas de coordenadas. Aunque existen desplazamientos fijos variables entre los sistemas de coordenadas debido al mobiliario del navegador, la distancia entre los puntos debe ser idéntica si la página no se amplía. La razón para especificar "muy separados" (pongo esto 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 oyente de movimiento del mouse

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

  2. Capture 4 mediciones de eventos del mouse:

    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, se aplica el zoom. La diferencia entre los dos te dice la cantidad de zoom.

Nota: rara vez solo hace los cálculos de distancia, por ejemplo, cuando puede probar un nuevo evento de mouse que está lejos del anterior.

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

— usuario1191311
fuente
1
Creé un violín: Creé jsfiddle.net/Terite/9b6ko854 con "lejos" como 100 píxeles. Desafortunadamente, funciona inestable en Firefox (52) en MacBook con pantalla retina. También debe tenerse en cuenta que el zoom de la interfaz de Windows 7 125% se detecta en Chrome, Firefox e IE11 (en el zoom 125%, que es el valor predeterminado en ese momento) como un zoom del navegador.
— Terite
Tu violín funciona para mí, probado en Linux con Firefox y Chrome :)
— user1191311
Las pantallas de retina agregan otro nivel de dificultad porque informan incorrectamente los tamaños de píxeles, entre otras cosas.
— user1191311
5

Puede usar la API de Visual Viewport :

window.visualViewport.scale;

Es estándar y funciona tanto en computadoras de escritorio como en dispositivos móviles: soporte de navegador .

— collimarco
fuente
Parece práctico, pero todavía está deshabilitado de manera predeterminada en el escritorio de Firefox, y no funciona en Internet Explorer a partir del 5/31/20.
— derekbaker783
3

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 104% y 109% cuando el zoom del navegador esté configurado en 105% y 110% respectivamente).

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

— Pench
fuente
1
Interesante. Para mí, siempre muestra el 80% del zoom ... Creo que esto se debe a que tengo una configuración de fuentes grandes en el nivel de Windows 7 (busque "tamaño de fuente" en el panel de control). Es mejor que la solución IE8 en la respuesta de @ yonran que no funcionó en absoluto para mí. jsbin.com/obowof
— ripper234
Estoy obteniendo un 101% cuando el zoom se establece en 100%.
— Allen Wallace
yo también. 0,4999 utilizar en lugar de 0,9
— yan Bellavance
ieZoomLevel = ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.4999) .toFixed ();
— Yan Bellavance
3

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í ctrl+y ctrl-zooms.

o puedo agregar la línea a un $(window).onresize()evento 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: esta es mi primera publicación, perdón por cualquier error

— Abhishek Borar
fuente
3
Desafortunadamente, esto solo funcionará si el usuario tiene el navegador maximizado ( screen.availWidthinforma el ancho de la pantalla en píxeles de la pantalla, no la ventana del navegador).
— Bailey Parker
3

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

Sin embargo, no parece funcionar en Firefox.

Esto también funciona en WebKit:

var zoomLevel = document.width / document.body.clientWidth;
— Rudolfrck
fuente
55
document.widthvuelve indefinido
— Adam
Siempre devuelve verdadero sin importar el zoom (2017, febrero, pantalla de retina).
— Tiberiu-Ionuț Stan
3

Básicamente tenemos:

  • window.devicePixelRatioque tiene en cuenta tanto el zoom a nivel del navegador * como el zoom del sistema / densidad de píxeles.
    * - en Mac / Safari el nivel de zoom no se tiene en cuenta
  • preguntas de los medios
  • vw/ vhUnidades CSS
  • resize evento, 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 el nivel de zoom, eso podría ser un signo de un mal diseño de la interfaz de usuario.

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

— kirilloid
fuente
1
window.devicePixelRatio es una buena respuesta que funciona en la última versión de los principales navegadores: Chrome, Safari, FF, Edge, IE
— DShultz
@kirilloid, ¿encontró algo que pudiera usarse para encontrar de manera confiable el "nivel de zoom" en Safari?
— onassar
1

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

¿Qué le gustaría que suceda 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 zoom del 50%, este dispositivo ahora muestra un píxel de imagen en un píxel del dispositivo.

— Neil
fuente
@Neil: ¿cómo puedo obtener las dimensiones de 'píxeles CSS'?
— comprensión
El valor predeterminado de CSS es puntos, pero, por supuesto, puede especificar píxeles utilizando el modificador de dimensión px. En cuanto a las propiedades del elemento recuperadas en JavaScript, estas ya deberían estar en píxeles CSS. Entonces, si especifica que el ancho de un <div> sea 100px, eso es lo que obtendrá de JavaScript, sea cual sea el nivel de zoom.
— Neil
1

En Chrome

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— Nicolas Giszpenc
fuente
1
Funciona solo cuando la ventana del navegador tiene el ancho completo de la pantalla.
— tenbits
0

No probé esto para IE, pero si crea un elemento elemcon

min-width: 100%

luego 

window.document.width / elem.clientWidth

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

— Dirk van Oosterbosch
fuente
Probé esto, pero acercar no parece aumentar elem.clientWidth
— Tom
0

Esto es para Chrome , a raíz de la respuesta del usuario 800583 ...

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

  • Hay 16 'zoomLevel' y no 10
  • Cuando Chrome está en 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 primer caso puede ser abordado por el segundo.

Entonces llegué a lo siguiente ...

Pero este enfoque tiene limitaciones: por ejemplo, si toca el acordeón con la ventana de la aplicación (amplía y reduce rápidamente el ancho de la ventana), obtendrá brechas entre los niveles de zoom, aunque el zoom no ha cambiado (puede ser exteriorWidth y innerWidth no 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 ]
);
— jeum
fuente
Tuve problemas con "window.outerWidth / window.innerWidth", lo que también me dio un valor incorrecto y eso podría deberse a que estaba en un iframe. Entonces, lo que hice fue usar la ventana principal y me dio la respuesta correcta: window.parent.window.outerWidth / window.parent.window.innerWidth
— yan bellavance el
0

Tengo esta solución solo para dispositivos 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 poco de tiempo de espera debido al retraso de renderizado (pero no estoy seguro porque no lo probé).

— pmrotule
fuente
0

Esta respuesta se basa en comentarios acerca de que DevicePixelRatio regresa incorrectamente en la respuesta del usuario 1080381.

Descubrí que este comando también regresaba incorrectamente en algunos casos al trabajar 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, noté que el SP3 regresaba como 1 y media veces el nivel de zoom que esperaba. Cuando eché un vistazo a la configuración de pantalla, el SP3 estaba configurado en 150% en lugar del 100% que tenía en mi escritorio.

Entonces, 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, así es como se ve este código al 100% de zoom:

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

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

— Cameron Weaver
fuente
0

Tenerlo funcionando actualmente, sin embargo, aún debe separarse por navegador. Probado con éxito en Chrome (75) y Safari (11.1) (todavía no he encontrado el camino para FF). También obtiene el valor de zoom correcto en la pantalla de retina y los cálculos se activan en el evento de cambio de tamaño.

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }
— Yogui
fuente
-1

¡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 de qué nivel de zoom: le mostrará el ancho de 400 px (al menos con Firefox y ie8)

@tfl: es porque has arreglado el ancho en estilo en línea. He modificado su muestra para mostrar mi caso (publicado dentro de la pregunta original).
— comprensión
-1

Esto puede o no ayudar a nadie, pero tenía una página que no pude centrar correctamente sin importar los trucos de Css que intenté, así que escribí una página del Centro de llamadas de archivos JQuery:

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

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

Desde mi página tuve que vincular a 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();
});

Además, 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);
    }
}
— usuario1054326
fuente
-1

Esta es una pregunta publicada hace mucho tiempo, pero hoy cuando estaba buscando la misma respuesta "Cómo detectar el 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 se puede capturar usando:

$(window).resize(function() {
//YOUR CODE.
});
— Bhumi Singhal
fuente
-1

Una solución alternativa para FireFox 16+ para encontrar DPPX (nivel de zoom) únicamente 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);
— Lexasss
fuente
No funciona como se esperaba en Firefox (52) en MacBook con pantalla retina; devuelve 2 cuando no está en zoom. Creé
— Terite
-1 
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;
};
— Ali
fuente
66
Amablemente también explique cómo funciona su código. Eso será útil si algún novato encuentra su respuesta.
— displayName
Creé un violín: jsfiddle.net/Terite/5n1bk9do como @AlexeySh. mencionado, no funciona como se esperaba en la pantalla retina en Chrome (56), Firefox (52). También muestra 0 en zoom en Safari (10).
— Terite
-1

El problema radica en los tipos de monitor utilizados, un monitor 4k frente a un monitor estándar. Chrome es, con mucho, el más inteligente al poder decirnos cuál es el nivel de zoom con solo usarwindow.devicePixelRatio , aparentemente puede decir cuál es la densidad de píxeles e informa 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 para 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 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 quisiera apuñalar a otros navegadores y actualizar el violín, entonces hágalo. Mi objetivo principal era cubrir estos 3 navegadores para detectar si las personas usaban un factor de zoom superior al 100% para usar mi aplicación web y mostrar un aviso que sugiriera un factor de zoom menor.

— Bill_VA
fuente
Safari en Mac Book Pro (pantalla de retina) devuelve 0, Chrome en pantalla sin retina devuelve correctamente parece 100, 90, etc.
— OZZIE
Devuelve 200 en la pantalla de retina de Chrome y Firefox
— OZZIE
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.