टच डिवाइस पर ब्राउज़र में डबल-टैप "ज़ूम" विकल्प को अक्षम करें

112

मैं चाहता हूँ को निष्क्रिय दो बार स्पर्श करें ज़ूम कार्यक्षमता निर्दिष्ट तत्वों पर , ब्राउज़र (स्पर्श उपकरणों पर) में सभी ज़ूम कार्यक्षमता अक्षम किए बिना ।

उदाहरण के लिए: किसी चीज़ के होने के लिए एक तत्व को कई बार टैप किया जा सकता है। यह डेस्कटॉप ब्राउज़रों (जैसा कि अपेक्षित है) पर ठीक काम करता है, लेकिन टच डिवाइस ब्राउज़रों पर, यह ज़ूम इन करेगा।

html  browser  touch  zoom 
— राउटर Konecny
स्रोत
हालांकि ज़ूम के लिए नहीं, लेकिन यहां कुछ अन्य आवश्यक हैं - `-वेबकिट-टच-कॉलआउट: कोई नहीं; -webkit- पाठ-आकार-समायोजन: कोई नहीं; -webkit-user-select: कोई नहीं;
— उदयराज देशमुख

जवाबों:

99

नोट (2020-08-04 तक): यह समाधान iOS सफारी v12 + में काम नहीं करता है। IOS सफारी को कवर करने वाला एक स्पष्ट समाधान खोजने के बाद मैं इस उत्तर को अपडेट करूंगा और इस नोट को हटा दूंगा।

सीएसएस-केवल समाधान

touch-action: manipulationकिसी भी ऐसे तत्व को जोड़ें जिस पर आप निम्न disable-dbl-tap-zoomश्रेणी के साथ डबल टैप ज़ूम को अक्षम करना चाहते हैं :

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

से touch-actionडॉक्स (जोर मेरा):

जोड़-तोड़

पैनिंग को सक्षम करें और ज़ूम इशारों को चुटकी लें, लेकिन ज़ूम करने के लिए डबल-टैप जैसे अतिरिक्त गैर-मानक इशारों को अक्षम करें ।

यह मान Android और iOS पर काम करता है।

— रॉस एलन
स्रोत
@SergoPasoevi, क्या आप एक उदाहरण बना सकते हैं जो काम नहीं करता है? मैं iOS 12 के लिए इस समाधान का उपयोग कर रहा हूं, और यह मेरे लिए काम कर रहा है।
— रॉस एलन
मैं @SergoPasoevi जैसी ही समस्या देख रहा हूं, iOS 12 पर काम नहीं कर रहा हूं
— ट्रेवर जेएक्स
IOS 12 पर मेरे लिए काम किया!
— KB2497
2
टच-एक्शन के साथ आपके पूरे शरीर को लपेटने की सहमति क्या है: हेरफेर?
— ओयेजेन
1
जब कोई छवि दोहराता है तो नवीनतम iOS पर काम नहीं करता है।
— एडम सिल्वर
54 
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
etc...
</head>

मैंने हाल ही में इसका उपयोग किया है और यह iPad पर ठीक काम करता है। Android या अन्य उपकरणों पर परीक्षण नहीं किया गया (क्योंकि वेबसाइट केवल iPad पर प्रदर्शित की जाएगी)।

— Kablam
स्रोत
16
यह सभी ज़ूम कार्यक्षमता को अक्षम कर देगा, दुर्भाग्य से यह मेरा सवाल नहीं था। मैं केवल निर्दिष्ट तत्वों को अक्षम करना चाहता हूं।
— राउटर कोनसेनी
ओइ बकवास। मैंने इसे दूसरे तरीके से पढ़ा, मेरे ऊपर असफल रहा। माफ़ करना!
— कबलाम
5
इस समाधान के बारे में कैसे? यह केवल iOS है, लेकिन शायद tweakable? : gist.github.com/2047491
— काबलम
2
@ रूटरकॉन्की यदि आप उपयोगकर्ता-जांच को हटाते हैं, तो उसे किसी भी डिवाइस पर काम करना चाहिए जो टचस्टार्ट इवेंट का समर्थन करता है। उन उपकरणों आप की तरह एक कुछ का उपयोग कर सकते पता लगाने के लिए isEventSupported
— NXT
4
Apple अब आधिकारिक तौर पर इस पर ध्यान नहीं देता है। github.com/w3c/html/issues/602
— catamphetamine
38

मुझे पता है कि यह पुराना हो सकता है, लेकिन मुझे एक समाधान मिला जो मेरे लिए पूरी तरह से काम करता है। पागल मेटा टैग और सामग्री जूमिंग को रोकने की कोई आवश्यकता नहीं है।

मैं 100% निश्चित नहीं हूं कि यह कैसे क्रॉस-डिवाइस है, लेकिन यह ठीक उसी तरह काम करता है जैसा मैं चाहता था।

$('.no-zoom').bind('touchend', function(e) {
  e.preventDefault();
  // Add your code here. 
  $(this).click();
  // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})

यह बस सामान्य टैपिंग फ़ंक्शन को अक्षम करेगा, और फिर एक मानक क्लिक इवेंट को फिर से कॉल करेगा। यह मोबाइल डिवाइस को ज़ूम करने से रोकता है, लेकिन अन्यथा सामान्य रूप से कार्य करता है।

EDIT: यह अब एक दंपति लाइव ऐप में समय-परीक्षण और चल रहा है। लगता है 100% पार ब्राउज़र और मंच। उपरोक्त कोड को अधिकांश मामलों के लिए कॉपी-पेस्ट समाधान के रूप में काम करना चाहिए, जब तक कि आप क्लिक इवेंट से पहले कस्टम व्यवहार नहीं चाहते हैं ।

— Rockster160
स्रोत
सरल लेकिन शानदार जवाब। मेटा टैग या आदि को संशोधित करने की कोई आवश्यकता नहीं है
— benchpresser
2
यह क्लिक अक्षम करता है, मुझे नहीं लगता कि यह एक अच्छा समाधान है क्षमा करें
— Pixelomo
6
आपको ऐसा करने के लिए JS की आवश्यकता नहीं है कि आप pointer-events: none
— Pixelomo
1
धन्यवाद कि यह पूरे पृष्ठ पर ज़ूम को अक्षम किए बिना वेतन वृद्धि / गिरावट बटन को संभालने के लिए पूरी तरह से काम करता है।
— रेमन
1
अगर मैं इसे सही ढंग से देखता हूं, तो यह उन कुछ स्थितियों में विफल हो सकता है जहां आपको विश्वसनीय घटनाओं की आवश्यकता होती है (उदाहरण के लिए sth पर क्लिकिन जो पूर्णस्क्रीन या अन्य प्रयोगों को ट्रिगर कर रहा है, क्योंकि yneed विश्वसनीय घटनाओं का मतलब है जो USER / OS द्वारा TRIGGERED है
— मैनुअल ग्रेफ
29

मैं सिर्फ अपने सवाल का ठीक से जवाब देना चाहता था क्योंकि कुछ लोग जवाब के नीचे टिप्पणी नहीं पढ़ते हैं। तो यहाँ यह है:

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) return; // not double-tap

        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click').trigger('click');
      });
  };
})(jQuery);

मैंने यह नहीं लिखा, मैंने इसे संशोधित किया। मुझे यहाँ केवल iOS संस्करण मिला: https://gist.github.com/2047491 (धन्यवाद कबल)

— राउटर Konecny
स्रोत
1
यह कम से कम SIII (w / Android 4.0.4) पर काम नहीं करता है। मैंने डॉक्यूमेंट, बॉडी, विंडो, *, नो पासे से बंधने की कोशिश की।
— मैक्स
मुझे भी आज़माया, सफारी / आईपैड, एंड्रॉइड क्रोम पर काम करता है, लेकिन एंड्रॉइड डिफ़ॉल्ट ब्राउज़र के साथ नहीं
— स्ट्रै डे
2
jquery जावास्क्रिप्ट नहीं है यह एक पुस्तकालय के बिना ऐसा करने का एक उदाहरण होना अच्छा होगा
— मार्टिज़न शेफ़र
एक गैर-jquery संस्करण की तलाश में :-(
— टिमो
फिर से, jQuery का जावास्क्रिप्ट नहीं है, और इसे प्रोत्साहित नहीं किया जाना चाहिए, क्योंकि यह कोणीय जैसे अधिक आधुनिक विचारों के आधार पर साइटों के साथ अच्छी तरह से काम नहीं करता है। प्रश्न पढ़ें
— मार्टिज़न शेफ़र
15

सीएसएस डबल-टैप ज़ूम को विश्व स्तर पर अक्षम करने के लिए (किसी भी तत्व पर): 

  * {
      touch-action: manipulation;
  }

जोड़-तोड़

पैनिंग को सक्षम करें और ज़ूम इशारों को चुटकी लें, लेकिन ज़ूम करने के लिए डबल-टैप जैसे अतिरिक्त गैर-मानक इशारों को अक्षम करें।

धन्यवाद रॉस, मेरा जवाब उसका विस्तार करता है: https://stackoverflow.com/a/53236027/9986657

— जनवरी
स्रोत
1
यह उत्तर चिह्नित किया जाना चाहिए। मैंने इसे केवल html और बॉडी पर लगाने की कोशिश की लेकिन यह iOS 13.2 में काम नहीं किया। यह काम।
— आर ओएमएस
यह अपने आप में iOS 13 पर काम नहीं करता है, लेकिन इस कोड के साथ मिलकर यह रिएक्ट ऐप के लिए ज़ूम इन टैप करता है। document.getElementById('root').addEventListener('click', () => {})
— सर्गेई
ios13 पर ज़ूम करने के लिए ऐप्पल डिसेबल्ड टैप, आप यह कैसे कह सकते हैं कि यह iOS13 पर काम नहीं करता है?
— ओयेजेन
15

यदि आपको एक संस्करण की आवश्यकता है जो jQuery के बिना काम करता है , तो मैंने वेनिला जावास्क्रिप्ट का उपयोग करने के लिए Wouter Konecny ​​के उत्तर को संशोधित किया (जो जोहान Sundström द्वारा इस जिस्ट को संशोधित करके भी बनाया गया था )।

function preventZoom(e) {
  var t2 = e.timeStamp;
  var t1 = e.currentTarget.dataset.lastTouch || t2;
  var dt = t2 - t1;
  var fingers = e.touches.length;
  e.currentTarget.dataset.lastTouch = t2;

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}

फिर touchstartइस फ़ंक्शन को कॉल करने वाला इवेंट हैंडलर जोड़ें :

myButton.addEventListener('touchstart', preventZoom);
— एवरिम पर्सबेबे
स्रोत
3
प्रतिभाशाली। बस यह उल्लेख करना चाहता था कि मुझे इसे जोड़ने के लिए एक addEventListener को जोड़ना होगा। myButton.addEventListener('touchstart', preventZoom);
— मार्टिन जकुबिक
11

आपको सीएसएस संपत्ति touch-actionको noneइस अन्य उत्तर में वर्णित के रूप में सेट करना चाहिए https://stackoverflow.com/a/42288386/1128216

.disable-doubletap-to-zoom {
    touch-action: none;
}
— जोनाथन मोरालेस वेलेज़
स्रोत
1
यह काम करता है ... लेकिन क्या होगा अगर मैं ज़ूमिंग को अक्षम करना चाहता हूं, लेकिन अन्य स्पर्श घटनाओं को छोड़ दें? मेरे पास एक बड़ी तालिका है और यह स्क्रॉलिंग को भी अक्षम करता है।
— FrenkyB
2
यदि आप केवल डबल-टैप ज़ूम से छुटकारा पाना चाहते हैं, तो आपको 'टच-एक्शन: मैनिपुलेट;' यह अभी भी पैनिंग और चुटकी-ज़ूमिंग की अनुमति देगा। महत्वपूर्ण नोट: यह डबल-टैप ज़ूम को लागू करने के लिए शुरू किए गए क्लिक देरी ब्राउज़र से छुटकारा पाने में भी मदद करता है। देख developer.mozilla.org/en-US/docs/Web/CSS/touch-action
— cschuff
HTML टैग को किस वर्ग में जोड़ा जाना चाहिए?
— रज़वान ज़म्फिर
मुझे लगता है कि आप इसे किसी भी तत्व में जोड़ सकते हैं जिसे आप ज़ूम इन करने के लिए उपयोग नहीं करना चाहते हैं। उदाहरण के लिए, मेरे मामले में मैं नहीं चाहता था कि उपयोगकर्ता मेरे पृष्ठ के किसी भी भाग में ज़ूम करे, इसलिए मैंने इसे बॉडी टैग में जोड़ा।
— जोनाथन मोरालेस वेलेज़
2 
* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

टच स्क्रीन पर ज़ूम करने के लिए डबल टैप को अक्षम करें। इंटरनेट एक्सप्लोरर शामिल

— एरकिन डेडिओलु
स्रोत
1

सरल डिफ़ॉल्ट व्यवहार को रोकें click, dblclickया touchendईवेंट ज़ूम कार्यक्षमता को अक्षम कर देंगे।

यदि आपके पास इस ईवेंट में से किसी एक पर कॉलबैक पहले से है तो बस कॉल करें event.preventDefault()।

— विलियम ग्रासल
स्रोत
1
इसने मेरे लिए काम किया। मैं एक बटन पर अपनी खुद की टचस्टार्ट घटना को परिभाषित कर रहा था, और मैं ज़ूम फ़ंक्शन को अक्षम करना चाहता था।
— रिक गिउल
1

अगर मेरे जैसा कोई है जो Vue.js का उपयोग करके इस मुद्दे का अनुभव कर रहा है , तो बस .prevent इस चाल को जोड़ देगा:@click.prevent="someAction"

— सॉल्वे टॉर्ने
स्रोत
0

यह 'बॉडी' में तत्वों पर डबल टैप ज़ूम को रोक देगा। इसे किसी अन्य चयनकर्ता में बदला जा सकता है

$('body').bind('touchstart', function preventZoom(e){
            var t2 = e.timeStamp;
            var t1 = $(this).data('lastTouch') || t2;
            var dt = t2 - t1;
            var fingers = e.originalEvent.touches.length;
            $(this).data('lastTouch', t2);
            if (!dt || dt > 500 || fingers > 1){
                return; // not double-tap
            }
            e.preventDefault(); // double tap - prevent the zoom
            // also synthesize click events we just swallowed up
            $(e.target).trigger('click');

});

लेकिन इसने मेरी क्लिक ईवेंट को ट्रिगर होने से रोका जब कई बार क्लिक किया गया तो मुझे अपने क्लिक पर ईवेंट को ट्रिगर करने के लिए किसी अन्य ईवेंट को बाध्य करना पड़ा

$('.selector').bind('touchstart click', preventZoom(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
      // Handle touchstart event.
    } else if(e.type == "click") {
      // Handle click event.
    }
});

टचस्टार्ट पर मैंने ज़ूम को रोकने और एक क्लिक को ट्रिगर करने के लिए कोड जोड़ा।

$('.selector').bind('touchstart, click', function preventZoom(e){
            e.stopPropagation(); //stops propagation
            if(e.type == "touchstart") {
                // Handle touchstart event.
                var t2 = e.timeStamp;
                var t1 = $(this).data('lastTouch') || t2;
                var dt = t2 - t1;
                var fingers = e.originalEvent.touches.length;
                $(this).data('lastTouch', t2);


                if (!dt || dt > 500 || fingers > 1){
                    return; // not double-tap
                }

                e.preventDefault(); // double tap - prevent the zoom
                // also synthesize click events we just swallowed up
                $(e.target).trigger('click');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });
— डली एस
स्रोत
-1

मुझे लगता है कि मेरे पास <div>पाठ, स्लाइडर्स और बटन के साथ एक इनपुट कंटेनर क्षेत्र है, और उस में आकस्मिक डबल-टैप को रोकना चाहते हैं <div>। निम्नलिखित इनपुट क्षेत्र पर ज़ूमिंग को रोकता नहीं है, और यह मेरे <div>क्षेत्र के बाहर डबल-टैप और ज़ूमिंग से संबंधित नहीं है। ब्राउज़र ऐप के आधार पर विविधताएं हैं।

मैंने बस कोशिश की।

(1) IOS पर सफारी के लिए, और Android पर क्रोम, और पसंदीदा तरीका है। सैमसंग पर इंटरनेट ऐप को छोड़कर काम करता है, जहां यह डबल-टैप को पूरी तरह से नहीं <div>, बल्कि कम से कम ऐसे तत्वों को निष्क्रिय करता है जो टैप को संभालते हैं। यह रिटर्न और इनपुट return falseपर अपवाद के साथ ।textrange

$('selector of <div> input area').on('touchend',disabledoubletap);

function disabledoubletap(ev) {

    var preventok=$(ev.target).is('input[type=text],input[type=range]');

    if(preventok==false) return false; 
}

(2) वैकल्पिक रूप से एंड्रॉइड (5.1, सैमसंग) पर बिल्ट-इन इंटरनेट ऐप के लिए <div>, पर डबल-टैप को रोकता है, लेकिन इस पर ज़ूमिंग को रोकता है <div>:

$('selector of <div> input area').on('touchstart touchend',disabledoubletap);

(३) एंड्रॉइड ५.१ पर क्रोम के लिए, डबल-टैप को बिल्कुल निष्क्रिय कर देता है, ज़ूमिंग को बाधित नहीं करता है और अन्य ब्राउज़रों में डबल-टैप के बारे में कुछ भी नहीं करता है। डबल-टैप-इनहिबिटिंग <meta name="viewport" ...>परेशान है, क्योंकि <meta name="viewport" ...>अच्छा अभ्यास लगता है।

<meta name="viewport" content="width=device-width, initial-scale=1, 
          maximum-scale=5, user-scalable=yes">
— पीटर
स्रोत
-2

CSS टच-इवेंट्स का उपयोग करना: कोई भी पूरी तरह से सभी टच इवेंट्स को नहीं निकालता है। अगर किसी को भी यह समस्या है तो इसे छोड़ कर, मुझे इस समाधान को खोजने में 2 घंटे का समय लगा और यह केवल एक पंक्ति की सीएसएस है। https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

— Áसगीर फ़्रीमैनसन
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.