Modifica del livello di zoom del browser

Ho bisogno di creare 2 pulsanti sul mio sito che cambierebbero il livello di zoom del browser (+) (-). Sto richiedendo lo zoom del browser e non lo zoom css a causa delle dimensioni dell’immagine e dei problemi di layout.

Bene, è anche ansible? Ho sentito rapporti contrastanti.

Direi che non è ansible nella maggior parte dei browser, almeno non senza alcuni plugin aggiuntivi. E in ogni caso, proverei a evitare di fare affidamento sullo zoom del browser in quanto le implementazioni variano (alcuni browser ingrandiscono solo i caratteri, altri ingrandiscono le immagini, ecc.). A meno che non ti importi molto dell’esperienza utente.

Se hai bisogno di uno zoom più affidabile, prendi in considerazione lo zoom dei caratteri e delle immagini della pagina con JavaScript e CSS o, eventualmente, sul lato server. I problemi di ridimensionamento dell’immagine e del layout potrebbero essere affrontati in questo modo. Certo, questo richiede un po ‘più di lavoro.

Prova se questo funziona per te. Funziona su FF, IE8 + e Chrome. La parte else si applica ai browser non firefox. Sebbene questo ti dia un effetto zoom, in realtà non modifica il valore dello zoom a livello del browser.

var currFFZoom = 1; var currIEZoom = 100; $('#plusBtn').on('click',function(){ if ($.browser.mozilla){ var step = 0.02; currFFZoom += step; $('body').css('MozTransform','scale(' + currFFZoom + ')'); } else { var step = 2; currIEZoom += step; $('body').css('zoom', ' ' + currIEZoom + '%'); } }); $('#minusBtn').on('click',function(){ if ($.browser.mozilla){ var step = 0.02; currFFZoom -= step; $('body').css('MozTransform','scale(' + currFFZoom + ')'); } else { var step = 2; currIEZoom -= step; $('body').css('zoom', ' ' + currIEZoom + '%'); } }); 

ansible in IE e Chrome anche se non funziona in Firefox:

  example 

È ansible utilizzare la funzione di zoom CSS3 , ma non l’ho ancora testato con jQuery. Proverò ora e ti faccio sapere. AGGIORNAMENTO: testato, funziona ma è divertente

Non è stato ansible trovare un modo per modificare il livello di zoom effettivo del browser, ma è ansible avvicinarsi alla trasformazione CSS: scale (). Ecco la mia soluzione basata su JavaScript e jQuery:

    
        ------ ++++++   

Non è ansible in IE, poiché il pulsante Zoom UI nella barra di stato non è programmabile. YMMV per altri browser.

come la risposta accettata menzionata, puoi ingrandire l’attributo fontSize css dell’elemento in DOM uno per uno, il seguente codice come riferimento.