Modification du niveau de zoom du navigateur

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

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

Je dirais pas possible dans la plupart des navigateurs, du moins pas sans quelques plugins supplémentaires. Et dans tous les cas, j'essaierais d'éviter de me fier au zoom du navigateur car les implémentations varient (certains navigateurs ne zooment que sur les polices, d'autres zooment sur les images, etc.). Sauf si vous ne vous souciez pas beaucoup de l'expérience utilisateur.

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

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

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

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

Essayez si cela fonctionne pour vous. Cela fonctionne sur FF, IE8 + et chrome. L'autre partie s'applique aux navigateurs non-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 + '%');
        }
    });

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 le faire savoir. MISE À JOUR: testé, fonctionne mais c'est amusant

Je n'ai pas pu trouver un moyen de modifier le niveau de zoom réel du navigateur, mais vous pouvez vous en rapprocher 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>

comme réponse acceptée mentionnée, vous pouvez agrandir l'attribut fontSize css de l'élément dans DOM un par un, le code suivant pour 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>

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.

<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 seulement changer l'échelle !!!