ব্রাউজার জুম স্তর পরিবর্তন করা হচ্ছে

Question 1

আমার সাইটে আমার 2 টি বোতাম তৈরি করতে হবে যা ব্রাউজারের জুম স্তর (+) (-) পরিবর্তন করবে। আমি চিত্রের আকার এবং বিন্যাস সংক্রান্ত সমস্যার কারণে ব্রাউজার জুমকে সিএসএস জুম না অনুরোধ করছি।

আচ্ছা, এটা কি সম্ভব? আমি বিবাদমূলক রিপোর্ট শুনেছি।

Question 2

আমি বলব বেশিরভাগ ব্রাউজারে সম্ভব নয়, কিছু অতিরিক্ত প্লাগইন না থাকলেও না not এবং যে কোনও ক্ষেত্রে আমি প্রয়োগগুলি পরিবর্তিত হওয়ায় ব্রাউজারের জুমের উপর নির্ভর এড়াতে চেষ্টা করব (কিছু ব্রাউজার কেবল ফন্টগুলি জুম করে, অন্যরা চিত্রগুলিও জুম করে)) আপনি যদি না ব্যবহারকারীর অভিজ্ঞতার বিষয়ে বেশি যত্ন নেন।

আপনার যদি আরও নির্ভরযোগ্য জুমের প্রয়োজন হয় তবে জাভাস্ক্রিপ্ট এবং সিএসএসের সাহায্যে পৃষ্ঠা ফন্ট এবং চিত্রগুলি জুমিংয়ের কথা বিবেচনা করুন অথবা সম্ভবত সার্ভারের পাশে। চিত্র এবং লেআউট স্কেলিংয়ের সমস্যাগুলি এইভাবে সম্বোধন করা যেতে পারে। অবশ্যই এর জন্য আরও কিছুটা কাজ দরকার।

Question 3

IE এবং ক্রোমে সম্ভাব্য যদিও এটি ফায়ারফক্সে কাজ করে না:

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

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

Question 4

এটি আপনার পক্ষে কাজ করে কিনা চেষ্টা করুন। এটি FF, IE8 + এবং ক্রোমে কাজ করে। অন্য অংশটি অ-ফায়ারফক্স ব্রাউজারগুলির জন্য প্রযোজ্য। এটি আপনাকে একটি জুম এফেক্ট দেয় যদিও এটি ব্রাউজার স্তরে জুম মানটি পরিবর্তিত করে না।

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

Question 5

আপনি CSS3 জুম ফাংশনটি ব্যবহার করতে পারেন , তবে আমি এখনও jQuery দিয়ে এটি পরীক্ষা করি নি। এখনই চেষ্টা করবে এবং আপনাকে জানাতে হবে। আপডেট: এটি পরীক্ষা করেছে, কাজ করে তবে মজাদার

Question 6

আমি প্রকৃত ব্রাউজার জুম স্তর পরিবর্তন করার কোনও উপায় খুঁজে পাইনি, তবে আপনি সিএসএস রূপান্তর: স্কেল () এর সাথে খুব কাছাকাছি যেতে পারেন। জাভাস্ক্রিপ্ট এবং 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>

Question 7

যেমনটি গৃহীত উত্তর হিসাবে উল্লেখ করা হয়েছে, আপনি ডিওএমে উপাদানটির ফন্টসাইজ সিএসএস বৈশিষ্ট্য একের পর এক বড় করতে পারেন, আপনার রেফারেন্সের জন্য নিম্নলিখিত কোডটি।

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

Question 8

আইই তে সম্ভব নয়, স্ট্যাটাস বারের ইউআই জুম বোতামটি স্ক্রিপ্টযোগ্য নয়। অন্যান্য ব্রাউজারগুলির জন্য ওয়াইএমএমভি।

Question 9

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

স্নিপেট প্রসারিত করুন

ফায়ারফক্সে জুম পরিবর্তন হবে না শুধুমাত্র পরিবর্তন স্কেল !!!