Come rilevare il livello di zoom della pagina in tutti i browser moderni?

  1. Come posso rilevare il livello di zoom della pagina in tutti i browser moderni? Mentre questo thread dice come farlo in IE7 e IE8, non riesco a trovare una buona soluzione cross-browser.

  2. Firefox memorizza il livello di zoom della pagina per l’accesso futuro. Al caricamento della prima pagina, sarei in grado di ottenere il livello di zoom? Da qualche parte ho letto che funziona quando si verifica un cambio di zoom dopo che la pagina è stata caricata.

  3. C’è un modo per intrappolare l’evento 'zoom' ?

Ho bisogno di questo perché alcuni dei miei calcoli sono basati su pixel e possono fluttuare quando vengono ingranditi.


Esempio modificato dato da @tfl

    Questa pagina avverte diversi valori di altezza quando si esegue lo zoom. [jsFiddle]

          
    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.

    Ora è un casino ancora più grande di quando è stata posta questa domanda. Dalla lettura di tutte le risposte e post del blog che ho trovato, ecco un riassunto. Ho anche creato questa pagina per testare tutti questi metodi di misurazione del livello di zoom .

    Modifica (2011-12-12): Ho aggiunto un progetto che può essere clonato: https://github.com/tombigel/detect-zoom

    • IE8 : screen.deviceXDPI / screen.logicalXDPI (o, per il livello di zoom relativo allo zoom predefinito, 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; (grazie a questo esempio o questa risposta )
    • SOLO FF3.5 : larghezza schermo screen.width / media query (vedi sotto) (sfrutta il fatto che screen.width utilizza i pixel del dispositivo ma la larghezza MQ utilizza i pixel CSS – grazie alle larghezze di Quirksmode )
    • FF3.6 : nessun metodo conosciuto
    • FF4 + : media query ricerca binaria (vedi sotto)
    • WebKit : https://www.chromestatus.com/feature/5737866978131968 (grazie a Teo nei commenti)
    • WebKit : misura la dimensione preferita di un div con -webkit-text-size-adjust:none .
    • WebKit : (interrotto dal r72591 ) document.width / jQuery(document).width() (grazie a Dirk van Oosterbosch sopra ). Per ottenere un rapporto in termini di pixel del dispositivo (anziché rispetto allo zoom predefinito), moltiplicalo per window.devicePixelRatio .
    • Vecchio WebKit? (non verificato): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (da questa risposta )
    • Opera : document.documentElement.offsetWidth / width of a position:fixed; width:100% position:fixed; width:100% div. da qui ( la tabella delle larghezze di Quirksmode dice che è un bug, innerWidth dovrebbe essere CSS px). Usiamo la posizione: elemento fisso per ottenere la larghezza della finestra, incluso lo spazio dove sono le barre di scorrimento ; document.documentElement.clientWidth esclude questa larghezza. Questo è rotto da qualche tempo nel 2011; Non conosco alcun modo per ottenere il livello di zoom in Opera più.
    • Altro : soluzione Flash di Sebastian
    • Inaffidabile: ascolta gli eventi del mouse e misura i cambiamenti in screenX / cambia in clientX

    Ecco una ricerca binaria per Firefox 4, poiché non conosco alcuna variabile in cui è esposta:

      
    Dummy element to test media queries.

    Per me, per Chrome / Webkit, document.width / jQuery(document).width() non ha funzionato. Quando ho reso la mia finestra piccola e ingrandita nel mio sito in modo tale da far apparire barre di scorrimento orizzontali, document.width / jQuery(document).width() non era uguale a 1 allo zoom predefinito. Questo perché document.width include parte del documento all’esterno della finestra.

    Usando window.innerWidth e window.outerWidth funzionato. Per qualche motivo in Chrome, outerWidth viene misurato in pixel dello schermo e innerWidth viene misurato in pixel 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"; } 

    Puoi provare

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

    Questo ti darà il livello percentuale di zoom del browser.

    Per catturare l’evento di zoom puoi utilizzare

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

    Il mio collega e io abbiamo usato la sceneggiatura da https://github.com/tombigel/detect-zoom . Inoltre, abbiamo anche creato dynamicmente un elemento svg e controlliamo la sua proprietà currentScale. Funziona alla grande su Chrome e probabilmente anche sulla maggior parte dei browser. Su FF, però, la funzione “solo testo con zoom” deve essere distriggersta. SVG è supportato nella maggior parte dei browser. Al momento della stesura di questo documento, testato su IE10, FF19 e ​​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); 

    Ho trovato questo articolo estremamente utile. Enorme grazie a yonran. Volevo trasmettere alcuni ulteriori insegnamenti che ho trovato mentre implementavo alcune delle tecniche che ha fornito. In FF6 e Chrome 9, è stato aggiunto il supporto per le query multimediali di JS, che può semplificare notevolmente l’approccio alla media query necessario per determinare lo zoom in FF. Vedi i documenti su MDN qui . Per i miei scopi, ho solo bisogno di rilevare se il browser è stato ingrandito o ridotto, non ho avuto bisogno del fattore di zoom effettivo. Sono stato in grado di ottenere la mia risposta con una riga di JavaScript:

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

    Combinando questo con le soluzioni IE8 + e Webkit, che erano anche linee singole, sono stato in grado di rilevare lo zoom sulla maggior parte dei browser che colpiscono la nostra app con solo poche righe di codice.

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

    Questo è tutto ciò di cui hai bisogno.

    In Internet Explorer 7, 8 e 9, questo funziona:

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

    Il “+0.9” viene aggiunto per evitare errori di arrotondamento (altrimenti, si otterrebbe il 104% e il 109% quando lo zoom del browser è impostato su 105% e 110% rispettivamente).

    In IE6 lo zoom non esiste, quindi non è necessario controllare lo zoom.

    Questo ha funzionato alla perfezione nei browser basati su 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; } 

    Non sembra funzionare in Firefox però.

    Funziona anche su WebKit:

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

    Ho una soluzione per questo a partire da gennaio 2016. Testati lavorando su browser Chrome, Firefox e MS Edge.

    Il principio è il seguente. Raccogli 2 punti MouseEvent distanti tra loro. Ogni evento del mouse viene fornito con le coordinate dello schermo e del documento. Misurare la distanza tra i 2 punti in entrambi i sistemi di coordinate. Sebbene ci siano degli offset fissi variabili tra i sistemi di coordinate a causa dei mobili del browser, la distanza tra i punti dovrebbe essere identica se la pagina non è ingrandita. Il motivo per specificare “distanti tra loro” (l’ho messo a 12 pixel) è così che è ansible rilevare piccoli cambiamenti di zoom (ad es. 90% o 110%).

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

    passi:

    1. Aggiungi un ascoltatore di movimento del mouse

       window.addEventListener("mousemove", function(event) { // handle event }); 
    2. Cattura 4 misurazioni dagli eventi del mouse:

       event.clientX, event.clientY, event.screenX, event.screenY 
    3. Misurare la distanza d_c tra i 2 punti nel sistema client

    4. Misurare la distanza d_s tra i 2 punti nel sistema di schermo

    5. Se d_c! = D_s viene applicato lo zoom. La differenza tra i due ti dice la quantità di zoom.

    NB Esegui raramente i calcoli della distanza, ad esempio quando puoi campionare un nuovo evento del mouse che è lontano dal precedente.

    Limitazioni: si presume che l’utente muoverà il mouse almeno un po ‘e lo zoom non è conoscibile fino a questo momento.

    Quello che mi è venuto in mente è:

    1) Stabilisci una position:fixed

    con width:100% ( id = zoomdiv )

    2) quando la pagina viene caricata:

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

    E ha funzionato per me per ctrl+ e ctrl+ ctrl- .

    o posso aggiungere la linea ad un evento $(window).onresize() per ottenere il livello di zoom attivo


    Codice:

       

    PS: questo è il mio primo post, perdonare eventuali errori

    I tuoi calcoli sono ancora basati su un numero di pixel CSS. Adesso hanno solo una dimensione diversa sullo schermo. Questo è il punto di zoom a pagina intera.

    Cosa vorresti che succedesse su un browser su un dispositivo 192dpi che di conseguenza visualizzava normalmente quattro pixel di dispositivo per ogni pixel in un’immagine? Al 50% di zoom, questo dispositivo visualizza ora un pixel dell’immagine in un pixel del dispositivo.

    Non ho provato questo per IE, ma se fai un elemento elem con

     min-width: 100% 

    poi

     window.document.width / elem.clientWidth 

    fornirà il livello di zoom del tuo browser (incluso il fattore document.body.style.zoom ).

    Questo è per Chrome , sulla scia della risposta utente800583

    Ho trascorso alcune ore su questo problema e non ho trovato un approccio migliore, ma:

    • Ci sono 16 ‘zoomLevel’ e non 10
    • Quando Chrome è a schermo intero / massimizzato il rapporto è window.outerWidth/window.innerWidth , e quando non lo è, il rapporto sembra essere (window.outerWidth-16)/window.innerWidth , tuttavia il primo caso può essere affrontato dal 2 ° uno.

    Quindi sono venuto al seguente …

    Ma questo approccio ha dei limiti: ad esempio, se suoni la fisarmonica con la finestra dell’applicazione (ingrandisci rapidamente e riduci la larghezza della finestra) otterrai degli spazi tra i livelli di zoom anche se lo zoom non è cambiato (potrebbe essere outerWidth e innerWidth non sono esattamente aggiornato nello stesso tempo).

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

    E se vuoi il fattore:

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

    Ho questa soluzione solo per dispositivi mobili (testata con Android):

     jQuery(function($){ zoom_level = function(){ $("body").prepend('
    '); var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width(); $("body .overlay:eq(0)").remove(); return ratio; } alert(zoom_level()); });

    Se vuoi il livello di zoom subito dopo la mossa, probabilmente dovrai impostare un po ‘di timeout a causa del ritardo del rendering (ma non sono sicuro perché non l’ho provato).

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

    Fondamentalmente, abbiamo:

    • window.devicePixelRatio che tiene conto sia dello zoom a livello del browser * che della densità dello zoom / pixel del sistema.
      * – su Mac / Safari il livello di zoom non viene preso in considerazione
    • media query
    • vw / vh unità CSS
    • resize event, che viene triggersto al cambio del livello di zoom, causa la dimensione effettiva delle modifiche della finestra

    dovrebbe essere sufficiente per la normale UX. Se è necessario rilevare il livello di zoom che potrebbe essere un segno di ctriggers progettazione dell’interfaccia utente.

    Pitch-zoom è più difficile da tracciare e non è considerato al momento.

    Questa risposta si basa sui commenti su devicePixelRatio che ritornano erroneamente sulla risposta dell’utente1080381.

    Ho scoperto che questo comando si stava ripristinando in modo errato anche in alcuni casi quando si lavora con un desktop, Surface Pro 3 e Surface Pro 4.

    Quello che ho trovato è che ha funzionato sul mio desktop, ma SP3 e SP4 stavano dando numeri diversi tra loro e sul desktop.

    Ho notato che SP3 stava tornando come 1 volta e mezza il livello di zoom che mi aspettavo. Quando ho dato un’occhiata alle impostazioni del display, l’SP3 era effettivamente impostato al 150% invece del 100% che avevo sul mio desktop.

    Quindi, la soluzione ai commenti dovrebbe essere quella di dividere il livello di zoom restituito dalla scala della macchina in cui ci si trova attualmente.

    Sono stato in grado di ottenere la scala nelle impostazioni di Windows effettuando le seguenti operazioni:

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

    Quindi, nel caso del mio SP3, questo è il modo in cui questo codice guarda lo zoom al 100%:

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

    Moltiplicando per 100 nella risposta originale di user1080381 ti darebbe uno zoom di 100 (%).

    Il problema sta nei tipi di monitor utilizzati, un monitor 4k vs monitor standard. Chrome è di gran lunga il più intelligente nel riuscire a dirci quale sia il livello di zoom usando window.devicePixelRatio , apparentemente può dire qual è la densità dei pixel e riporta lo stesso numero per importanza.

    Altri browser, non così tanto. IE e Edge sono probabilmente i peggiori, poiché gestiscono i livelli di zoom in modo molto diverso. Per ottenere lo stesso testo di dimensioni su un monitor 4K, è necessario selezionare il 200%, anziché il 100% su un monitor standard.

    A partire da maggio 2018, ecco cosa devo rilevare i livelli di zoom per alcuni dei browser più popolari, Chrome, Firefox e IE11. Devo dirmi qual è la percentuale di zoom. Per IE, riporta il 100% anche per i monitor 4k che sono effettivamente al 200%, ma la dimensione del testo è davvero la stessa.

    Ecco un violino: https://jsfiddle.net/ae1hdogr/

    Se qualcuno volesse prendere una pugnalata agli altri browser e aggiornare il violino, allora per favore fallo. Il mio objective principale era quello di ottenere questi 3 browser coperti per rilevare se le persone utilizzavano un fattore di ingrandimento maggiore del 100% per utilizzare la mia applicazione web e visualizzare un avviso che suggeriva un fattore di ingrandimento minore.

    Sui dispositivi mobili (con Chrome per Android o Opera Mobile) puoi rilevare lo zoom da window.visualViewport.scale . https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

    Rileva su Safari: document.documentElement.clientWidth / window.innerWidth (restituisce 1 se non esegue lo zoom sul dispositivo).

    qui non cambia !:

          
    foobar

    creare un semplice file html, fare clic sul pulsante. indipendentemente dal livello di zoom: ti mostrerà la larghezza di 400px (almeno con firefox e ie8)

    Questo può o non può aiutare nessuno, ma avevo una pagina che non riuscivo a centrare correttamente, non importa quali trucchi Css ho provato così ho scritto una pagina del call center del file JQuery:

    Il problema si è verificato con il livello di zoom del browser, la pagina si sposta in base a se si fosse 100%, 125%, 150%, ecc.

    Il codice seguente è in un file JQuery chiamato centerpage.js.

    Dalla mia pagina ho dovuto colbind a JQuery e questo file per farlo funzionare, anche se la mia pagina principale aveva già un collegamento a JQuery.

     Home Page.   

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

    Inoltre se vuoi centrare un pannello:

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

    Questa domanda è stata postata più indietro nel tempo, ma oggi, quando stavo cercando la stessa risposta “Come rilevare lo zoom in e out dell’evento”, non sono riuscito a trovare una risposta adatta a tutti i browser.

    Come ora: per Firefox / Chrome / IE8 e IE9, lo zoom in e out fa scattare un evento window.resize. Questo può essere catturato usando:

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

    Una soluzione alternativa per FireFox 16+ per trovare DPPX (livello di 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);