ब्राउज़र ज़ूम स्तर बदलना

Question

मुझे अपनी साइट पर 2 बटन बनाने की आवश्यकता है जो ब्राउज़र ज़ूम स्तर (+) (-) को बदल देगा। छवि आकार और लेआउट समस्याओं के कारण मैं ज़ूम ज़ूम करने का अनुरोध कर रहा हूँ और सीएसएस ज़ूम नहीं।

अच्छा, क्या यह भी संभव है? मैंने परस्पर विरोधी रिपोर्टें सुनी हैं।

Comments

ब्राउज़र ज़ूम एक ऐसी चीज़ है जिसे केवल उपयोगकर्ता द्वारा नियंत्रित किया जाना चाहिए - वेब साइट कभी नहीं। यदि वेब साइट ब्राउज़र ज़ूम स्तर को बदल सकती है, तो ब्राउज़र के पास सबसे बुनियादी पहुंच सुविधा को तोड़ देती है। मैं वेब साइट को ब्राउज़र ज़ूम को गंभीर बग के रूप में बदलने की अनुमति देने की किसी भी विधि पर विचार करूंगा, क्योंकि उस सुविधा का कोई भी उपयोग दुरुपयोग होगा।

— user57368

@unknown (गूगल), बकवास। तुम बहुत गलत हो। इस तरह के नियंत्रण जावास्क्रिप्ट में समृद्ध वेब एप्लिकेशन बनाने के लिए अमूल्य हैं जो फ्लैश तक माप सकते हैं, और दूसरी बात यह है कि जूम ब्राउज़र केवल उपयोगकर्ता इंटरैक्शन के साथ उपलब्ध होने के लिए ज़ूम नियंत्रण को सीमित कर सकते हैं और पूर्ण नियंत्रण नहीं दे सकते हैं।

— १

मैं वास्तव में पूरे थक गया हूँ "आपको XYZ कभी नहीं करना चाहिए"। हाँ, यह एक संपूर्ण दुनिया में अच्छा और अच्छा है, या जब आप एक ब्रांड-नई साइट लिख रहे हों। लेकिन अगर साइट एक दशक पुरानी है, तो ग्राहक एक नए डिजाइन के लिए भुगतान नहीं करेगा, और आपके बॉस आपको एक टैबलेट पर साइट का काम करने की उम्मीद करते हैं, इस तरह की "आप वास्तव में नहीं" मानसिकता को एक गंभीर रूप ले सकते हैं -सीट। यदि आप कुछ करना जानते हैं, तो ऐसा कहें। यदि आप नहीं करते हैं, तो टिप्पणी न करें। मंच पर बकवास बकवास करने वाले मंचों पर आना बेमानी है, और वास्तव में काफी असभ्य है।

— नाथन क्रूस

पुरानी पोस्ट लेकिन "आपको कभी नहीं" और "ब्राउज़र को अनुमति नहीं देनी चाहिए" के बीच एक अंतर है। यह ठीक है क्योंकि वेब देव सीमाओं को आगे बढ़ा रहे हैं, उस ब्राउज़र देवों को उपयोगकर्ताओं की भलाई के लिए सीमाएं निर्धारित करनी पड़ती हैं। अन्यथा हम अभी भी अनुकूलित रंगीन स्क्रॉलबार और शेक-द-विंडो ऑनलोड के एक वेब में होंगे।

— ओलिवेव

पुराने पुनर्जीवित लेकिन गर्म लानत धन्यवाद @NathanCrause! मैं उस बिंदु पर आ रहा हूं जहां मुझे एक्सेसिबिलिटी कार्यक्षमता को जारी करने की आवश्यकता है क्योंकि कुछ उपयोगकर्ता भी नहीं देख सकते हैं, और ब्राउज़र ज़ूम को बदलने में सक्षम नहीं होना मेरे जीवन को कठिन बना रहा है। CSS ज़ूम सिर्फ jquery ui

— DdD

Answer 1

मैं कहूंगा कि अधिकांश ब्राउज़र में संभव नहीं है, कम से कम कुछ अतिरिक्त प्लगइन्स के बिना नहीं। और किसी भी मामले में मैं ब्राउज़र के ज़ूम पर भरोसा करने से बचने की कोशिश करूंगा क्योंकि कार्यान्वयन अलग-अलग होते हैं (कुछ ब्राउज़र केवल फोंट ज़ूम करते हैं, अन्य लोग छवियों को भी ज़ूम करते हैं, आदि)। जब तक आप उपयोगकर्ता अनुभव के बारे में ज्यादा परवाह नहीं करते।

यदि आपको अधिक विश्वसनीय ज़ूम की आवश्यकता है, तो पृष्ठ फोंट और छवियों को जावास्क्रिप्ट और सीएसएस के साथ या संभवतः सर्वर साइड पर ज़ूम करने पर विचार करें। छवि और लेआउट स्केलिंग मुद्दों को इस तरह से संबोधित किया जा सकता है। बेशक, इसके लिए थोड़ा और काम करने की जरूरत है।

Answer 2

IE में संभव है और क्रोम हालांकि यह फ़ायरफ़ॉक्स में काम नहीं करता है:

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

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

Comments

जौर्की ने स्पष्ट रूप से गैर सीएसएस ज़ूम के लिए कहा ।

— किमीकप्लान

यह सिर्फ शरीर पर CSS जूम वैल्यू इनलाइन को बदल रहा है, जो सवाल पूछे जाने के बिल्कुल विपरीत है।

— mystrdat

यह मत भूलो कि इस ज़ूम स्थिति की संभावना लगातार सहेजे जाने और एक सत्र चर में प्रबंधित करने और प्रत्येक पृष्ठ लोड को फिर से देखने की आवश्यकता है।

— माइकल ब्लेंकशिप

Answer 3

कोशिश करें कि यह आपके लिए काम करे। यह 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 + '%');
        }
    });

Comments

आपके पास jquery 1.8.3 या jquery माइग्रेट प्लगइन ($

— .browser

यह CSS जूमिंग है

— HelloWorld

स्थिरता के लिए, मोजट्रांसफॉर्म मामले में, मूल सेट करें:

— जोएल टेप्ली

आप आजकल केवल transform: scale(..)सभी ब्राउज़रों में सेट करने में सक्षम होना चाहिए । MozTransformफ़ायरफ़ॉक्स के वर्तमान संस्करणों में भी मौजूद नहीं है।

— हेलके वालिंगा

Answer 4

आप CSS3 ज़ूम फ़ंक्शन का उपयोग कर सकते हैं , लेकिन मैंने इसे अभी तक jQuery के साथ परीक्षण नहीं किया है। अब कोशिश करेंगे और आपको बताएंगे। अद्यतन: यह परीक्षण किया, काम करता है, लेकिन यह मजेदार है

Comments

हाँ, पूरी तरह से नहीं। क्रॉस-ब्राउज़र के लिए कोई विचार? अद्यतन: कोई जरूरत नहीं है, बस ऊपर पोस्ट की जाँच की! चीयर्स

— ओबजनर

क्रोम और सफारी में काम करने लगता है, लेकिन फ़ायरफ़ॉक्स नहीं।

— Ansjovis86

IPad OS Safari में टूटा हुआ

— leroyjenkinss24

Answer 5

मुझे वास्तविक ब्राउज़र ज़ूम स्तर को बदलने का कोई तरीका नहीं मिला, लेकिन आप CSS ट्रांसफ़ॉर्म: स्केल () के साथ बहुत करीब आ सकते हैं। यहाँ जावास्क्रिप्ट और 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>

Answer 6

उल्लिखित स्वीकृत उत्तर के रूप में, आप DOM में तत्व के फॉन्टसाइज़ css विशेषता को एक-एक करके, अपने संदर्भ के लिए निम्न कोड में बड़ा कर सकते हैं।

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

Answer 7

IE में संभव नहीं है, क्योंकि स्थिति पट्टी में UI ज़ूम बटन स्क्रिप्ट योग्य नहीं है। अन्य ब्राउज़रों के लिए YMMV।

Comments

आईई window.parent.document.body.style.zoom = 1.5 में इसकी संभावना;

— मुस्तफा एकी

मूल पोस्टर विशेष रूप से "सीएसएस ज़ूम नहीं" के लिए पूछता है।

— म_जॉर्फ

Answer 8

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

फ़ायरफ़ॉक्स में ज़ूम नहीं बदलेगा केवल परिवर्तन पैमाना !!!

Comments

एक बार फिर, यह सीएसएस जूमिंग है , जो प्रश्न द्वारा अवांछनीय है।

— जॉन वीज़