Ändern der Zoomstufe des Browsers

Ich muss auf meiner Website zwei Schaltflächen erstellen, die die Zoomstufe des Browsers (+) (-) ändern. Ich fordere Browser-Zoom und nicht CSS-Zoom wegen Bildgröße und Layout-Problemen an.

Nun, ist das überhaupt möglich? Ich habe widersprüchliche Berichte gehört.

Ich würde sagen, in den meisten Browsern nicht möglich, zumindest nicht ohne einige zusätzliche Plugins. Und auf jeden Fall würde ich versuchen, mich nicht auf den Zoom des Browsers zu verlassen, da die Implementierungen variieren (einige Browser zoomen nur die Schriftarten, andere zoomen auch die Bilder usw.). Es sei denn, Sie interessieren sich nicht viel für die Benutzererfahrung.

Wenn Sie einen zuverlässigeren Zoom benötigen, sollten Sie die Seitenschriftarten und -bilder mit JavaScript und CSS oder möglicherweise auf der Serverseite zoomen. Die Probleme bei der Bild- und Layoutskalierung könnten auf diese Weise behoben werden. Dies erfordert natürlich etwas mehr Arbeit.

Möglich in IE und Chrome, obwohl es in Firefox nicht funktioniert:

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

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

Versuchen Sie, ob dies für Sie funktioniert. Dies funktioniert auf FF, IE8 + und Chrome. Der else-Teil gilt für Nicht-Firefox-Browser. Dadurch erhalten Sie zwar einen Zoomeffekt, der Zoomwert wird jedoch auf Browserebene nicht geändert.

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

Sie können die CSS3-Zoomfunktion verwenden , aber ich habe sie noch nicht mit jQuery getestet. Werde es jetzt versuchen und dich wissen lassen. UPDATE: getestet, funktioniert, aber es macht Spaß

Ich konnte keine Möglichkeit finden, die tatsächliche Zoomstufe des Browsers zu ändern, aber Sie können mit CSS transform: scale () ziemlich nahe kommen. Hier ist meine Lösung basierend auf JavaScript und 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>

Als akzeptierte Antwort können Sie das fontSize css-Attribut des Elements in DOM nacheinander vergrößern. Der folgende Code dient als Referenz.

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

Im IE nicht möglich, da die Schaltfläche zum Zoomen der Benutzeroberfläche in der Statusleiste nicht skriptfähig ist. YMMV für andere Browser.

<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 ändert sich der Zoom nicht nur die Skala !!!