web-dev-qa-db-de.com

Ändern der Browser-Zoomstufe

Ich muss auf meiner Site 2 Schaltflächen erstellen, die die Zoomstufe des Browsers (+) (-) ändern. Ich fordere Browser-Zoom und nicht CSS-Zoom aufgrund von Problemen mit der Bildgröße und dem Layout an.

Ist das überhaupt möglich? Ich habe widersprüchliche Berichte gehört.

javascriptbrowserzoom
84
Jourkey

Ich würde sagen, dass dies in den meisten Browsern nicht möglich ist, zumindest nicht ohne zusätzliche Plugins. In jedem Fall würde ich versuchen, mich auf den Zoom des Browsers zu verlassen, da die Implementierungen variieren (einige Browser zoomen nur die Schriftarten, andere zoomen die Bilder usw.). Es sei denn, Sie interessieren sich nicht 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 gelöst werden. Dies erfordert natürlich etwas mehr Arbeit.

36
Eemeli Kantola

Versuchen Sie, ob dies für Sie funktioniert. Dies funktioniert bei FF, IE8 + und Chrom. Der else-Teil gilt für Nicht-Firefox-Browser. Obwohl Sie einen Zoomeffekt erhalten, wird der Zoomwert 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 + '%');
        }
    });
28
Vijey

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()">
19
Corne Lukken

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ß

9
Dmitry Lambrianov

Ich konnte keine Möglichkeit finden, die tatsächliche Zoomstufe des Browsers zu ändern, aber Sie können mit CSS umwandeln: scale (). 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>
1
Bogdanio

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

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>

in Firefox wird der Zoom nicht geändert, sondern nur der Maßstab geändert !!!

0
amini gazar

als akzeptierte Antwort können Sie das Schriftgrößenattribut css 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>
0
SalutonMondo