Mengubah tingkat zoom browser

Saya perlu membuat 2 tombol di situs saya yang akan mengubah tingkat zoom browser (+) (-). Saya meminta zoom browser dan bukan zoom css karena masalah ukuran gambar dan tata letak.

Nah, apakah ini mungkin? Saya pernah mendengar laporan yang bertentangan.

Saya akan mengatakan tidak mungkin di sebagian besar browser, setidaknya tidak tanpa beberapa plugin tambahan. Dan bagaimanapun, saya akan mencoba untuk menghindari mengandalkan zoom browser karena implementasinya bervariasi (beberapa browser hanya memperbesar font, yang lain memperbesar gambar, juga dll). Kecuali Anda tidak terlalu peduli dengan pengalaman pengguna.

Jika Anda membutuhkan zoom yang lebih andal, pertimbangkan untuk memperbesar font dan gambar halaman dengan JavaScript dan CSS, atau mungkin di sisi server. Masalah skala gambar dan tata letak dapat diatasi dengan cara ini. Tentu saja, ini membutuhkan lebih banyak pekerjaan.

Mungkin di IE dan chrome meskipun tidak berfungsi di firefox:

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

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

Coba jika ini berhasil untuk Anda. Ini berfungsi di FF, IE8 + dan chrome. Bagian lain berlaku untuk browser non-firefox. Meskipun ini memberi Anda efek zoom, sebenarnya ini tidak mengubah nilai zoom di tingkat browser.

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

Anda dapat menggunakan fungsi zoom CSS3 , tetapi saya belum mengujinya dengan jQuery. Akan mencoba sekarang dan memberi tahu Anda. UPDATE: mengujinya, berfungsi tetapi menyenangkan

Saya tidak dapat menemukan cara untuk mengubah tingkat zoom browser yang sebenarnya, tetapi Anda bisa mendekati transformasi CSS: scale (). Inilah solusi saya berdasarkan JavaScript dan 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>

sebagai jawaban yang diterima disebutkan, Anda dapat memperbesar atribut fontSize css elemen di DOM satu per satu, kode berikut untuk referensi Anda.

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

Tidak mungkin di IE, karena tombol Zoom UI di bilah status tidak dapat ditulis. YMMV untuk browser lain.

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

di Firefox tidak akan mengubah zoom hanya mengubah skala !!!