web-dev-qa-db-fra.com

Changer le niveau de zoom du navigateur

J'ai besoin de créer 2 boutons sur mon site pour changer le niveau de zoom du navigateur (+) (-). Je demande un zoom par navigateur et non un zoom css en raison de problèmes de taille et de mise en page.

Eh bien, est-ce même possible? J'ai entendu des rapports contradictoires.

javascriptbrowserzoom
84
Jourkey

Je dirais que ce n'est pas possible dans la plupart des navigateurs, du moins pas sans quelques plugins supplémentaires. Et dans tous les cas, j'essayerais d'éviter de compter sur le zoom du navigateur car les implémentations varient (certains navigateurs ne font que zoomer sur les polices, d'autres sur les images, etc.). À moins que vous n'aimiez pas beaucoup l'expérience utilisateur.

Si vous avez besoin d'un zoom plus fiable, envisagez de zoomer sur les polices de la page et les images avec JavaScript et CSS, ou éventuellement sur le serveur. Les problèmes d’échelle d’image et de mise en page pourraient être résolus de cette façon. Bien sûr, cela nécessite un peu plus de travail.

36
Eemeli Kantola

Essayez si cela fonctionne pour vous. Cela fonctionne sur FF, IE8 + et chrome. La partie else s'applique aux navigateurs autres que Firefox. Bien que cela vous donne un effet de zoom, cela ne modifie pas réellement la valeur de zoom au niveau du navigateur.

    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 + '%');
        }
    });
28
Vijey

Possible dans IE et chrome bien que cela ne fonctionne pas dans Firefox:

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

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

Vous pouvez utiliser la fonction de zoom CSS3 , mais je ne l’ai pas encore testée avec jQuery. Je vais essayer maintenant et vous faire savoir . UPDATE: testé, fonctionne mais c'est amusant

9
Dmitry Lambrianov

Je ne pouvais pas trouver un moyen de changer le niveau de zoom réel du navigateur, mais vous pouvez vous en approcher avec CSS transform: scale () Voici ma solution basée sur JavaScript et 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>
1
Bogdanio

Impossible dans IE, car le bouton Zoom de l'interface utilisateur dans la barre d'état n'est pas scriptable. YMMV pour les autres navigateurs.

1
i_am_jorf

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

dans Firefox ne changera pas le zoom mais change l'échelle !!!

0
amini gazar

en tant que réponse acceptée mentionnée, vous pouvez agrandir un par un l'attribut Size de la police de la taille de la police dans le DOM, le code suivant étant votre référence.

 <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>
0
SalutonMondo