Zmiana poziomu powiększenia przeglądarki

Muszę utworzyć 2 przyciski w mojej witrynie, które zmieniłyby poziom powiększenia przeglądarki (+) (-). Proszę o powiększenie przeglądarki, a nie powiększenie css z powodu problemów z rozmiarem obrazu i układem.

Cóż, czy to w ogóle możliwe? Słyszałem sprzeczne raporty.

Powiedziałbym, że nie jest to możliwe w większości przeglądarek, a przynajmniej nie bez dodatkowych wtyczek. W każdym razie starałbym się uniknąć polegania na powiększeniu przeglądarki, ponieważ implementacje są różne (niektóre przeglądarki powiększają tylko czcionki, inne powiększają również obrazy itp.). Chyba że nie obchodzi Cię zbytnio wrażenia użytkownika.

Jeśli potrzebujesz bardziej niezawodnego powiększenia, rozważ powiększenie czcionek strony i obrazów za pomocą JavaScript i CSS lub ewentualnie po stronie serwera. W ten sposób można rozwiązać problemy ze skalowaniem obrazu i układu. Oczywiście wymaga to nieco więcej pracy.

Możliwe w IE i Chrome, chociaż nie działa w Firefox:

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

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

Spróbuj, czy to działa dla Ciebie. Działa to na FF, IE8 + i Chrome. Pozostała część dotyczy przeglądarek innych niż Firefox. Chociaż daje to efekt powiększenia, w rzeczywistości nie zmienia wartości powiększenia na poziomie przeglądarki.

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

Możesz użyć funkcji zoom CSS3 , ale nie testowałem jej jeszcze z jQuery. Spróbuję teraz i dam znać. UPDATE: przetestowałem, działa, ale jest fajnie

Nie mogłem znaleźć sposobu, aby zmienić rzeczywisty poziom powiększenia przeglądarki, ale możesz być całkiem blisko dzięki transformacji CSS: scale (). Oto moje rozwiązanie oparte na JavaScript i 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>

zgodnie z akceptowaną odpowiedzią wspomniano, możesz powiększyć atrybut css fontSize elementu w DOM jeden po drugim, poniższy kod w celach informacyjnych.

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

Niemożliwe w IE, ponieważ przycisk UI Zoom na pasku stanu nie obsługuje skryptów. YMMV dla innych przeglądarek.

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

w przeglądarce Firefox nie zmieni powiększenia tylko zmieni skalę !!!