Ändern der Zoomstufe des Browsers

104

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.

Jourkey
quelle
8
Der Browser-Zoom sollte nur vom Benutzer gesteuert werden - niemals von der Website. Wenn die Website die Zoomstufe des Browsers ändern kann, wird die grundlegendste Eingabehilfenfunktion der Browser unterbrochen. Ich würde jede Methode, mit der eine Website den Browser-Zoom ändern kann, als schwerwiegenden Fehler betrachten, da jede Verwendung dieser Funktion Missbrauch wäre.
user57368
37
@unknown (google), Unsinn. Du liegst einfach sehr falsch. Solche Steuerelemente sind von unschätzbarem Wert für die Erstellung umfangreicher Webanwendungen in Javascript, die bis zu Flash reichen können, und zweitens können Browser die Zoomsteuerelemente so einschränken, dass sie nur bei Benutzerinteraktion verfügbar sind und keine vollständige Kontrolle bieten.
Jourkey
100
Ich werde wirklich müde von dem ganzen "Du solltest niemals XYZ". Ja, das ist alles schön und gut in einer perfekten Welt oder wenn Sie eine brandneue Website schreiben. Aber wenn die Site ein Jahrzehnt alt ist, wird der Kunde nicht für ein neues Design bezahlen, und Ihre Chefs erwarten, dass Sie eine Site auf einem Tablet zum Laufen bringen. Diese Art von "Sie sollten es wirklich nicht" -Mentalität kann einen ernsthaften Rückzug nehmen -Sitz. Wenn Sie wissen, wie man etwas macht, sagen Sie es. Wenn nicht, dann kommentieren Sie nicht. Es ist nicht hilfreich und eigentlich ziemlich unhöflich, in Foren zu kommen, in denen pedantischer Unsinn verbreitet wird.
Nathan Crause
5
alter Beitrag, aber es gibt einen Unterschied zwischen "Sie sollten nie" und "Browser sollte nicht zulassen". Gerade weil Webentwickler die Grenzen überschreiten, müssen Browserentwickler Grenzen setzen, zum Wohle der Benutzer. Andernfalls wären wir immer noch in einem Netz aus benutzerdefinierten bunten Bildlaufleisten und Shake-the-Window-Onload.
Olivvv
1
Alte Wiederbelebung, aber verdammt heiß, danke @NathanCrause! Ich komme an einen Punkt, an dem ich die Barrierefreiheitsfunktion freigeben muss, da einige Benutzer nicht so gut sehen können, und wenn ich den Browser-Zoom nicht ändern kann, wird mir das Leben schwer. CSS Zoom funktioniert einfach nicht gut mit jquery ui
DdD

Antworten:

40

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.

Eemeli Kantola
quelle
30

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()">
Corne Lukken
quelle
9
Jourkey hat ausdrücklich nach einem Nicht- CSS-Zoom gefragt .
kmkaplan
3
Dies ändert lediglich den CSS-Zoomwert inline am Körper, was genau das Gegenteil von dem bewirkt, was in der Frage gestellt wurde.
Mystrdat
Vergessen Sie nicht, dass dieser Zoomstatus wahrscheinlich dauerhaft gespeichert und in einer Sitzungsvariablen verwaltet und bei jedem Laden der Seite erneut abgespielt werden muss.
Michael Blankenship
29

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 + '%');
        }
    });
Vijey
quelle
1
Sie müssen jquery 1.8.3 oder jquery migrate Plugin haben (um $ .browser zu verwenden)
jave.web
24
Dies ist CSS-Zoom
HelloWorld
Legen Sie aus Gründen der Konsistenz im Fall MozTransform den Ursprung fest:
Joel Teply
Sie sollten heutzutage nur transform: scale(..)in allen Browsern einstellen können. MozTransformexistiert nicht einmal in aktuellen Versionen von Firefox.
Hielke Walinga
10

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ß

obzenner
quelle
Ja, total nicht. Irgendeine Idee für Cross-Browser? UPDATE: keine Notwendigkeit, nur den Beitrag oben überprüft! prost
obzenner
Scheint in Chrome und Safari zu funktionieren, aber nicht in Firefox.
Ansjovis86
In iPad OS Safari gebrochen
leroyjenkinss24
2

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>
Bogdanio
quelle
2

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>
SalutonMondo
quelle
1

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.

i_am_jorf
quelle
es ist möglich in IE window.parent.document.body.style.zoom = 1.5;
Mustafa Ekici
7
Das Originalplakat fordert ausdrücklich "nicht CSS-Zoom".
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 ändert sich der Zoom nicht nur die Skala !!!

Amini Gazar
quelle
3
Wieder einmal ist das CSS Zoomen , die durch die Frage nicht wünschenswert ist.
John Weisz