Tarayıcı yakınlaştırma düzeyini değiştirme

Sitemde tarayıcının yakınlaştırma düzeyini (+) (-) değiştirecek 2 düğme oluşturmam gerekiyor. Görüntü boyutu ve düzen sorunları nedeniyle tarayıcı yakınlaştırma talep ediyorum ve css yakınlaştırma istemiyorum.

Peki, bu mümkün mü? Çakışan raporlar duydum.

Çoğu tarayıcıda mümkün olmadığını söyleyebilirim, en azından bazı ek eklentiler olmadan. Ve her durumda, uygulamalar değişiklik gösterdiğinden tarayıcının yakınlaştırmasına güvenmekten kaçınmaya çalışırdım (bazı tarayıcılar yalnızca yazı tiplerini yakınlaştırır, bazıları da resimleri yakınlaştırır, vb.). Kullanıcı deneyimini fazla önemsemediğiniz sürece.

Daha güvenilir bir yakınlaştırmaya ihtiyacınız varsa, sayfa yazı tiplerini ve resimleri JavaScript ve CSS ile veya muhtemelen sunucu tarafında yakınlaştırmayı düşünün. Görüntü ve düzen ölçekleme sorunları bu şekilde çözülebilir. Tabii bu biraz daha fazla çalışma gerektiriyor.

Firefox'ta çalışmasa da IE ve Chrome'da mümkündür:

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

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

Bunun sizin için işe yarayıp yaramadığını deneyin. Bu, FF, IE8 + ve chrome'da çalışır. Diğer bölüm, Firefox olmayan tarayıcılar için geçerlidir. Bu size bir yakınlaştırma efekti sağlasa da aslında yakınlaştırma değerini tarayıcı düzeyinde değiştirmez.

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

CSS3 yakınlaştırma işlevini kullanabilirsiniz , ancak henüz jQuery ile test etmedim. Şimdi deneyecek ve size haber vereceğim. GÜNCELLEME: test edildi, çalışıyor ama eğlenceli

Gerçek tarayıcı yakınlaştırma düzeyini değiştirmenin bir yolunu bulamadım, ancak CSS dönüşümü: scale () ile oldukça yaklaşabilirsiniz. İşte benim JavaScript ve jQuery tabanlı çözümüm:

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

Belirtilen kabul edilen cevap olarak, DOM'daki öğenin fontSize css özniteliğini, referansınız için aşağıdaki kodu tek tek büyütebilirsiniz.

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

Durum çubuğundaki UI Yakınlaştırma düğmesi komut dosyası oluşturulamadığı için IE'de mümkün değildir. Diğer tarayıcılar için YMMV.

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

Firefox'ta yakınlaştırmayı değiştirmez, yalnızca ölçeği değiştir !!!