Modifica del livello di zoom del browser


104

Ho bisogno di creare 2 pulsanti sul mio sito che cambierebbero il livello di zoom del browser (+) (-). Chiedo lo zoom del browser e non lo zoom CSS a causa di problemi di dimensioni e layout dell'immagine.

Ebbene, è anche possibile? Ho sentito rapporti contrastanti.


8
Lo zoom del browser è qualcosa che dovrebbe essere controllato solo dall'utente, mai dal sito web. Se il sito web può alterare il livello di zoom del browser, ciò interrompe la funzionalità di accessibilità più basilare che i browser hanno. Considererei qualsiasi metodo per consentire a un sito web di cambiare lo zoom del browser un bug serio, perché qualsiasi utilizzo di quella funzione sarebbe un abuso.
user57368

37
@unknown (google), nonsense. Ti sbagli di grosso. Tali controlli sono inestimabili per la creazione di ricche applicazioni web in javascript che possono misurare fino a flash, e in secondo luogo i browser possono limitare i controlli di zoom per essere disponibili solo con l'interazione dell'utente e non dare il pieno controllo.
Jourkey

101
Mi stanco davvero di tutto "non dovresti mai XYZ". Sì, va tutto bene in un mondo perfetto, o quando scrivi un sito nuovo di zecca. Ma se il sito ha dieci anni, il cliente non pagherà per un nuovo design e i tuoi capi si aspettano che tu faccia funzionare un sito su un tablet, quel tipo di mentalità da "non dovresti proprio" può rimediare seriamente -posto a sedere. Se sai come fare qualcosa, dillo. Se non lo fai, non commentare. Entrare nei forum che sputano sciocchezze pedanti non è di aiuto, e in realtà piuttosto scortese.
Nathan Crause,

5
vecchio post ma c'è una differenza tra "non dovresti mai" e "il browser non dovrebbe consentire". È proprio perché gli sviluppatori web stanno spingendo i limiti, che gli sviluppatori di browser devono porre dei limiti, per il bene degli utenti. Altrimenti saremmo ancora in una rete di barre di scorrimento colorate personalizzate e onload shake-the-window.
Olivvv

1
Vecchio revive ma caldo dannatamente grazie @NathanCrause! Sto arrivando al punto in cui ho bisogno di rilasciare la funzionalità di accessibilità poiché alcuni utenti non possono vedere bene e non essere in grado di modificare lo zoom del browser mi sta rendendo la vita difficile. CSS Zoom non funziona bene con jquery ui
DdD

Risposte:


40

Direi che non è possibile nella maggior parte dei browser, almeno non senza alcuni plugin aggiuntivi. E in ogni caso tenterei di evitare di fare affidamento sullo zoom del browser poiché le implementazioni variano (alcuni browser ingrandiscono solo i caratteri, altri ingrandiscono anche le immagini, ecc.). A meno che non ti interessi molto dell'esperienza utente.

Se hai bisogno di uno zoom più affidabile, considera di ingrandire i caratteri e le immagini della pagina con JavaScript e CSS, o possibilmente sul lato server. I problemi di ridimensionamento dell'immagine e del layout potrebbero essere risolti in questo modo. Naturalmente, questo richiede un po 'più di lavoro.


31

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

<script>
   function toggleZoomScreen() {
       document.body.style.zoom = "80%";
   } 
</script>

<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">

9
Jourkey ha chiesto esplicitamente lo zoom non CSS.
kmkaplan

3
Questo sta solo cambiando il valore di zoom CSS in linea sul corpo, che fa esattamente l'opposto di ciò che la domanda ha posto.
mystrdat

Non dimenticare che questo stato di zoom probabilmente deve essere salvato e gestito in modo persistente in una variabile di sessione e riprodotto ogni caricamento della pagina.
Michael Blankenship

29

Prova se questo funziona per te. Funziona su FF, IE8 + e Chrome. L'altra parte si applica ai browser non Firefox. Sebbene questo ti dia un effetto di zoom, in realtà non modifica il valore di zoom a livello di 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 + '%');
        }
    });

1
devi avere jquery 1.8.3 o plugin di migrazione jquery (per usare $ .browser)
jave.web

24
Questo è lo zoom CSS
HelloWorld

Per coerenza, nel caso di MozTransform, imposta l'origine:
Joel Teply

Al giorno d'oggi dovresti solo essere in grado di impostare transform: scale(..)in tutti i browser. MozTransformnon esiste nemmeno nelle attuali versioni di Firefox.
Hielke Walinga

10

Puoi usare la funzione di zoom CSS3 , ma non l'ho ancora testata con jQuery. Proverò ora e ti farò sapere. AGGIORNAMENTO: testato, funziona ma è divertente


sì, assolutamente no. Qualche idea per cross-browser? AGGIORNAMENTO: non serve, basta controllare il post sopra! applausi
obzenner

Sembra funzionare in Chrome e Safari, ma non in Firefox.
Ansjovis86

Rotture in iPad OS Safari
leroyjenkinss24

2

Non sono riuscito a trovare un modo per modificare il livello di zoom effettivo del browser, ma puoi avvicinarti abbastanza con CSS transform: scale (). Ecco la mia soluzione basata su JavaScript e jQuery:

<!-- Trigger -->
<ul id="zoom_triggers">
    <li><a id="zoom_in">zoom in</a></li>
    <li><a id="zoom_out">zoom out</a></li>
    <li><a id="zoom_reset">reset zoom</a></li>
</ul>

<script>
    jQuery(document).ready(function($)
    {
        // Set initial zoom level
        var zoom_level=100;

        // Click events
        $('#zoom_in').click(function() { zoom_page(10, $(this)) });
        $('#zoom_out').click(function() { zoom_page(-10, $(this)) });
        $('#zoom_reset').click(function() { zoom_page(0, $(this)) });

        // Zoom function
        function zoom_page(step, trigger)
        {
            // Zoom just to steps in or out
            if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;

            // Set / reset zoom
            if(step==0) zoom_level=100;
            else zoom_level=zoom_level+step;

            // Set page zoom via CSS
            $('body').css({
                transform: 'scale('+(zoom_level/100)+')', // set zoom
                transformOrigin: '50% 0' // set transform scale base
            });

            // Adjust page to zoom width
            if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
            else $('body').css({ width: '100%' });

            // Activate / deaktivate trigger (use CSS to make them look different)
            if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
            else trigger.parents('ul').find('.disabled').removeClass('disabled');
            if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
            else $('#zoom_reset').addClass('disabled');
        }
    });
</script>

2

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

 <script>
    var factor = 1.2;
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var style = window.getComputedStyle(all[i]);
        var fontSize = style.getPropertyValue('font-size');

        if(fontSize){
            all[i].style.fontSize=(parseFloat(fontSize)*factor)+"px";
        }
        if(all[i].nodeName === "IMG"){
            var width=style.getPropertyValue('width');
            var height=style.getPropertyValue('height');
            all[i].style.height = (parseFloat(height)*factor)+"px";
            all[i].style.width = (parseFloat(width)*factor)+"px";
        }
    }
</script>

1

Non possibile in IE, poiché il pulsante Zoom dell'interfaccia utente nella barra di stato non è utilizzabile tramite script. YMMV per altri browser.


è possibile in IE window.parent.document.body.style.zoom = 1.5;
Mustafa Ekici

8
Il poster originale richiede specificamente "non zoom CSS".
i_am_jorf

0

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        var currFFZoom = 1;
        var currIEZoom = 100;

        function plus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom += step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom += stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');

        };
        function minus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom -= step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom -= stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');
        };
    </script>
    </head>
<body>
<!--zoom controls-->
                        <a id="minusBtn" onclick="minus()">------</a>
                        <a id="plusBtn" onclick="plus()">++++++</a>
  </body>
</html>

in Firefox non cambierà lo zoom solo cambierà scala !!!


3
Ancora una volta, questo è lo zoom CSS , che non è desiderabile dalla domanda.
John Weisz
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.