आईओएस 10+ सफारी को देखने के लिए अक्षम viewport?

164

मैं अपने iPhone 6 प्लस आईओएस के लिए 10 बीटा संस्करण को अद्यतन किया है और अभी पता चला है कि मोबाइल सफारी में, आप दो बार टैप करके किसी भी वेब पृष्ठों ज़ूम कर सकते हैं या बन्द रखो ध्यान न देंuser-scalable=no मेटा टैग में कोड। मुझे नहीं पता कि यह बग है या फीचर। यदि यह एक विशेषता के रूप में माना जाता है, तो हम iOS 10 सफारी जूमिंग व्यूपोर्ट को कैसे अक्षम करते हैं?

iOS 11/12 रिलीज़ पर अपडेट किया गया, iOS 11 और iOS 12 सफारी अभी भी मेटा टैग का सम्मान नहीं करते हैं user-scalable=no।

— सम सु
स्रोत

2

पहुँच सुविधा: iOS 10 twitter.com/thomasfuchs/status/742531231007559680/photo/1

— EricE

87

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

— dgatwood

36

यह कहना कि यह "बुरा व्यवहार" एक राय है और इस तथ्य को नहीं बदलता है कि ऐप्पल वेब मानकों को लेने के लिए आग्रह करता है कि समुदाय महीनों / वर्षों / दशकों को क्रॉस प्लेटफॉर्म लागू करने और उन पर एक विशाल बकवास लेने में खर्च करता है। Apple को यह क्यों निर्देशित करना चाहिए कि वेब डिज़ाइनर यह नहीं जानते कि वे क्या कर रहे हैं? भयानक तर्क।

— samrap

2

व्यक्तिगत रूप से, मुझे लगता है कि यह बॉयलरप्लेट कोड से ऑनलाइन उपजा है, जहां देवता केवल कॉपी और पेस्ट करते हैं, यह जानने के बिना कि कोड का उद्देश्य क्या है।

— विलियम इस्टेड

7

उत्तर सरल है, Apple: मेटा टैग को डिफॉल्ट-ऑफ एक्सेसिबिलिटी सेटिंग में अक्षम कर देता है। जिन्हें इसकी जरूरत है, उनके पास यह होगा, बिना सज़ा देने वालों के लिए।

— रुबेन मार्टिनेज जूनियर

94

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

फिर भी, मैं यह देखना चाहूंगा कि Apple अपने कार्यान्वयन को बदल दे ताकि डबल-टैप-टू-ज़ूम को अक्षम करने का एक सरल (मेटा-टैग) तरीका हो। अधिकांश कठिनाइयाँ उस सहभागिता से संबंधित हैं।

आप कुछ इस तरह से पिन-टू-जूम को रोक सकते हैं:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

ध्यान दें कि यदि घटना पर कोई गहरा लक्ष्य स्टॉपप्रोपैजेशन कहता है, तो घटना दस्तावेज़ तक नहीं पहुंचेगी और स्केलिंग व्यवहार को इस श्रोता द्वारा रोका नहीं जाएगा।

डबल-टैप-टू-ज़ूम को अक्षम करना समान है। आप पूर्व टैप के 300 मिली सेकेंड के भीतर होने वाले दस्तावेज़ पर किसी भी टैप को अक्षम कर देते हैं:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

यदि आप अपने फॉर्म एलिमेंट्स को सही सेट अप नहीं करते हैं, तो एक इनपुट पर ध्यान केंद्रित करना ऑटो-जूम होगा, और चूंकि आपके पास ज्यादातर मैनुअल जूम अक्षम है, इसलिए अब इसे अनज़ूम करना लगभग असंभव होगा। सुनिश्चित करें कि इनपुट फ़ॉन्ट का आकार> = 16px है।

यदि आप मूल एप्लिकेशन में WKWebView में इसे हल करने का प्रयास कर रहे हैं, तो ऊपर दिया गया समाधान व्यवहार्य है, लेकिन यह एक बेहतर समाधान है: https://stackoverflow.com/a/31943976/661418 । और जैसा कि अन्य उत्तरों में उल्लेख किया गया है, iOS 10 बीटा 6 में, Apple ने अब मेटा टैग को सम्मानित करने के लिए एक ध्वज प्रदान किया है।

मई 2017 को अपडेट करें: मैंने पुराने 'चेक टच टचस्ट पर लंबाई को बदल दिया है' पिनच-जूम को अक्षम करने के तरीके को एक सरल 'चेक इवेंट। टचलेव' दृष्टिकोण पर देखें। सभी के लिए अधिक विश्वसनीय होना चाहिए।

— यूसुफ
स्रोत

3

ध्यान दें कि टचस्टार्ट हैक असंगत है ... और यदि आप इसे खत्म करने का प्रबंधन करते हैं तो आप बहुत असहज स्थिति में फंस जाते हैं

— सैम सैफ्रन

5

उदाहरण के लिए। फुल स्क्रीन मैपिंग एप्स, मैपिंग एप्लिकेशन (गूगल मैप्स जेएस, कैटलॉग आदि) में जूम फीचर हार्ड कोडेड है। Google मेटा टैग जोड़ने की सलाह देता है <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />और यदि ब्राउज़र मेटा टैग का सम्मान नहीं करता है, तो यह बहुत बुरा ब्राउज़र डिज़ाइन है। यह बहुत ही खराब डिजाइन की तरह फिसलने से आगे / आगे की कार्रवाई है, जिसे iOS 9/10 में रोका नहीं जा सकता है। यह वेब एप्लिकेशन के अंदर गंभीर रूप से खींचने वाली क्रियाओं को तोड़ता है।

— तिमो Khhkönen

4

यदि उपयोगकर्ता एक उंगली से खींचना शुरू कर देता है तो स्क्रीन पर दूसरी उंगली डालें, चुटकी-ज़ूम कर सकेंगे। आप दोनों ज़ूम और एक साथ स्क्रॉल निष्क्रिय कर सकते हैं preventDefaultपर touchmove। स्क्रॉल को अक्षम किए बिना आप ज़ूम को पूरी तरह से अक्षम नहीं कर सकते।

— पाओलो

10

वाह, यह हिस्सा (मैं यहाँ पेस्ट करूँगा) मेरे लिए बहुत उपयोगी था। मैंने इंटरनेट पर किसी और के द्वारा इसका उल्लेख नहीं देखा है। इस समस्या को ठीक करने में मुझे घंटों लग गए। मैं इस बारे में Apple के UX डिजाइन विकल्पों में वास्तव में निराश हूं, जहां ऑटो जूम-इन बनता है, लेकिन फिर वापस ज़ूम आउट नहीं करता है।

If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.

— रियान

6

ऐसा लगता है कि यह अब iOS 12 में काम नहीं कर रहा है। किसी भी विचार कैसे iOS 12 के लिए यह काम करने के लिए?

— TJR

78

IOS 10 में यह एक नया फीचर है।

IOS 10 बीटा 1 रिलीज़ नोट्स से:

सफारी में वेबसाइटों पर पहुंच में सुधार करने के लिए, उपयोगकर्ता अब तब भी चुटकी कर सकते हैं जब वेबसाइट user-scalable=noव्यूपोर्ट में सेट हो जाती है।

मुझे उम्मीद है कि हम इसे किसी तरह से अक्षम करने के लिए जल्द ही एक जेएस एड-ऑन देखने जा रहे हैं।

— पॉल गेरार्ट्स
स्रोत

4

@ ओन्ज़ा: मुझे नहीं लगता कि यह बुरा है। मुझे लगता है यह अच्छा है। चुटकी बजाना / ज़ूम करना (डिफ़ॉल्ट उपयोगकर्ता व्यवहार) को बुरा माना जाता है, और बहुत सारी मोबाइल वेबसाइटें ऐसा करती हैं। केवल स्वीकार्य उपयोगकर्ता मामला एक वास्तविक वेब ऐप होगा जो ऐप की तरह दिखता है और महसूस करता है।

— w Augds

6

बुरा .. मैं js और ब्लॉक जूम का उपयोग करके व्यूपोर्ट में बदलाव करता हूं, जब वेबसाइट पर कुछ तत्वों का चयन किया जाता है अब यह "निर्णय" के कारण टूट गया है। यदि कोई इसे अवरुद्ध करने का निर्णय लेता है - एक कारण है।

— Zhenya

9

@ कार्लथ एक गेम डेवलपर के लिए बहुत बेड है

— संदीप

14

मेरे पास IOS 10.0.2 है, उपयोगकर्ता-स्केलेबल = नहीं हमारी वेबसाइट पर अब जूमिंग को अक्षम नहीं करता है ... ज़ूमिंग के साथ हमारा मुख्य मुद्दा हमारे फिक्स्ड साइड मेनू के साथ है .. यह सिर्फ लेआउट को तोड़ता है .. इस पर कोई विचार या समाधान? मैं समझता हूं कि जूमिंग एक्सेसिबिलिटी के लिए अच्छा है, हमने js इवेंट्स (हैमर) और css का उपयोग करके अपनी साइट के विशिष्ट हिस्सों पर जूमिंग उपलब्ध कराई है। मुझे नहीं लगता कि क्यों हर किसी पर एक नियम लागू किया जाना चाहिए, ऐसा लगता है जैसे पीसी पुलिस शुरू कर रही है हमारे देव दुनिया पर भी लेने के लिए ?!

— वेबकिट

50

"केवल स्वीकार्य उपयोगकर्ता मामला एक वास्तविक वेब ऐप होगा जो ऐप की तरह दिखता है और महसूस करता है।" - और यह है, जैसा कि आपने कहा, एक वास्तविक, स्वीकार्य उपयोग का मामला, जो कि दुर्लभ नहीं है ..

— फ्लोर्री

21

मैं touch-actionव्यक्तिगत तत्वों पर सीएसएस संपत्ति का उपयोग करके इसे ठीक करने में सक्षम हूं । touch-action: manipulation;लिंक या बटन जैसे आमतौर पर क्लिक किए जाने वाले तत्वों पर सेटिंग का प्रयास करें ।

— iainbeeston
स्रोत

1

"हेरफेर" चुटकी ज़ूम को नहीं रोकता है, केवल डबल-टैप ज़ूम।

— मूस

4

यह स्वीकृत उत्तर होना चाहिए। आप touch-action: none;सभी इशारों को स्वयं नियंत्रित करने के लिए उपयोग कर सकते हैं ।

— गाइ सोर्फ़र

4

यह बहुत अच्छा है - चुटकी को छोड़ते हुए डबल-टैप ज़ूमिंग को अक्षम करना, जिसे SHOULD को एक इशारा माना जाना चाहिए - डबल टैपिंग नहीं होना चाहिए। 1 कुत्ता एक कुत्ता है। 1 कुत्ता + 1 कुत्ता एक अंतरिक्ष यान नहीं बनाता है। यह 2 कुत्तों को बनाता है, और वे ऐसे काम करते हैं जिनसे आपको 2 कुत्तों की उम्मीद होगी। मैंने कभी नहीं सोचा था कि 2 कुत्ते एक अंतरिक्ष यान होंगे। कभी नहीँ।

— लैरी

5

@GuySopher iOS केवल प्रदान नहीं करता है , जो चुटकी-ज़ूम की समस्या को छोड़ देता है। touch-action: nonemanipulatoin

— मानवतावादपीस

14

ऐसा प्रतीत होता है कि यह व्यवहार नवीनतम बीटा में माना जाता है, जो लेखन के समय बीटा 6 है।

IOS 10 बीटा 6 के रिलीज़ नोटों से:

WKWebViewअब user-scalable=noव्यूपोर्ट से सम्मान के लिए चूक । के ग्राहकों WKWebViewपहुंच में सुधार लाने और उन सभी पृष्ठों पर पिंच-टू-जूम करने के लिए की स्थापना द्वारा अनुमति दे सकते हैं WKWebViewConfiguration संपत्ति ignoresViewportScaleLimitsके लिए YES।

हालाँकि, मेरे (बहुत सीमित) परीक्षण में, मैं अभी तक इस मामले की पुष्टि नहीं कर सकता।

संपादित करें: सत्यापित, iOS 10 बीटा 6 user-scalable=noमेरे लिए डिफ़ॉल्ट रूप से सम्मान करता है।

— Cellane
स्रोत

11

10.0.1 यहाँ। इसका सम्मान नहीं करता। Apple को उन सभी सुविधाओं से छुटकारा मिल गया है जिनकी सभी को जरूरत है ..

— जीवनरक्षक

1

यह सफारी को WKWebView नहीं करने के लिए संदर्भित करता है । स्रोत: हमारा एक मैप ऐप टूट गया और हमें नहीं पता कि इसे कैसे ठीक किया जाए।

— फाबियो पोलोनी

अहा! क्षमा याचना, मैं उसी बग / सुविधा के समाधान की खोज में यहां आया था WKWebViewऔर इस तरह का अनुमान लगाया कि मूल प्रश्न WKWebViewमेरे उत्तर लिखते समय पूछा गया था । इसलिए मुझे लगता है कि पहले बीटा संस्करणों में से एक के दौरान, ऐप्पल ने दोनों WKWebViewऔर मोबाइल सफारी के व्यवहार को बदल दिया , फिर बीटा 6 में, उन्होंने व्यवहार को वापस कर दिया, WKWebViewलेकिन इसे मोबाइल सफारी के लिए रखा।

— 13

1

10.0.2 सम्मान नहीं करता है user-scalable=no। मुझे यकीन नहीं है कि वे कभी इसे पूर्ववत क्यों करेंगे, केवल इसे वापस लाने के लिए, केवल इसे फिर से निकालने के लिए।

— ऐदन हकीमियन

13

लेखन के इस समय में मोबाइल सफारी में जो वर्कअराउंड काम करता है, उसमें तीसरा तर्क addEventListenerहोना चाहिए { passive: false }, इसलिए पूरा वर्कअराउंड इस प्रकार है:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

यदि बैकवर्ड संगत रहने के लिए विकल्पों का समर्थन किया जाता है, तो आप जांचना चाहते हैं ।

— कैस्पर फैब्रिकियस
स्रोत

3

किसी ने iOS 12 पर यह कोशिश की? मैंने उपरोक्त कोड जोड़ा है और यह मेरे वेबएप के लिए कुछ नहीं कर रहा है। अभी भी इस बेवकूफ सफारी में ज़ूम करने में सक्षम है। इस btw की तरह मेरे मेटा व्यूपोर्ट टैग दिखता है: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">।

— पैट्रिक डावडर

1

@PatrickDaVader Yep, iOS 12 Safari के लिए कोई भी कार्यशील समाधान नहीं ढूंढ सकता है। सभी लगातार जूमिंग से समुद्र के किनारे हो रही है।

— जेमी बर्च

1

यह एक आईओएस में काम करता है 13. मेरा <मेटा> टैग में शामिल हैं:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

और<meta name="HandheldFriendly" content="true">

— स्टर्लिंग बॉर्न

1

@SterlingBourne ने आपका सेटअप कॉपी किया। काम करता है, लेकिन केवल 90% समय की तरह। यकीन नहीं तो हर समय क्यों नहीं।

— १०:४० पर हिलबैंक नोव

1

@SterlingBourne प्रतिक्रिया ने मेरे लिए काम किया! धन्यवाद। उसे एक टिप्पणी के बजाय एक उत्तर के रूप में पोस्ट करना चाहिए ताकि इसे वोट किया जा सके <meta name = "viewport" सामग्री = "चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-स्केल = 1, अधिकतम-स्केल = 1, व्यूपोर्ट-फिट = कवर," उपयोगकर्ता-स्केलेबल = नहीं, हटना-फिट करने के लिए = नहीं "/> और <मेटा नाम =" हैंडहेल्डफ्रेंडली "सामग्री =" सच ">

— जीन ब्लैक

8

मैंने एक घंटे के लिए और अधिक मजबूत जावास्क्रिप्ट विकल्प की तलाश में खर्च किया, और एक नहीं मिला। यह सिर्फ इतना होता है कि पिछले कुछ दिनों में मैं हथौड़े से बंद कर रहा हूं। js (Hammer.js एक पुस्तकालय है जो आपको हर तरह की स्पर्श घटनाओं में आसानी से हेरफेर करने देता है) और जो मैं करने की कोशिश कर रहा था उसमें ज्यादातर असफल रहा।

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

सुनिश्चित करें कि आप अपने पेज में हथौड़े को शामिल करते हैं और फिर इस जावास्क्रिप्ट को सिर में कहीं भी चिपका कर देखें:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

स्निपेट का विस्तार करें

— sporker
स्रोत

मैं भी हथौड़े के साथ काम करते समय इस समस्या को हल करने की कोशिश कर रहा हूं। मैं यह पुष्टि कर सकता हूं कि मैं .preventDefaultसभी हथौड़ा जेस्चर हैंडलर्स में जोड़कर व्यूपोर्ट ज़ूम को रोक सकता हूं । मैं एक साथ स्वाइप / पिंच / पैन / टैप का उपयोग कर रहा हूं, मैंने इसे सभी हैंडलर्स में जोड़ दिया है, मुझे नहीं पता कि क्या कोई विशिष्ट काम है।

— कॉनन

6

मैंने चुटकी-दर-ज़ूम के बारे में पिछला जवाब देने की कोशिश की

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

हालाँकि कुछ समय स्क्रीन अभी भी ज़ूम करती है जब event.touches.length> 1 मुझे पता चला कि स्क्रीन पर किसी भी उंगली को हिलाने से बचने के लिए टचमोव इवेंट का उपयोग करना सबसे अच्छा तरीका है। कोड कुछ इस तरह होगा:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

आशा है कि यह मदद करेगा।

— चुहिया वू
स्रोत

7

यह तभी काम करता है जब आपका ऐप एकदम सही हो ... यदि आपके पास स्क्रॉल करने योग्य सामग्री है तो यह काम नहीं करता है ... फिर भी कुछ परिदृश्यों के लिए अच्छा हैक।

— इलाजम

8

यह भी वेबसाइट पर स्क्रॉल को अक्षम करता है .. BAD

— Gags

@eljamz मुझे पता करने के लिए धन्यवाद और हां..मेरा ऐप स्क्रीन पर एकदम फिट है।

— चिहुइंग वू

@Gags मैंने अभी तक स्क्रॉल फ़ंक्शन का परीक्षण नहीं किया, मुझे बताने के लिए धन्यवाद।

— चिहुइंग वू

6

टचोव इवेंट में स्केल फैक्टर की जांच करें फिर टच इवेंट को रोकें।

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

— प्रमोद
स्रोत

2

iOS 13 बदलकर {निष्क्रिय: असत्य}

— wayofthefuture

6

हम एक स्टाइल नियम को इंजेक्ट करके और ज़ूम इवेंट्स को इंटरसेप्ट करके सब कुछ प्राप्त कर सकते हैं:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

। चुटकी ज़ूम को अक्षम करता है।

Ables डबल-टैप ज़ूम को अक्षम करता है।

✔ स्क्रॉल प्रभावित नहीं है।

✔ टैप हाइलाइट को निष्क्रिय करता है (जो आईओएस पर, स्टाइल नियम द्वारा ट्रिगर किया गया है)।

सूचना: अपनी पसंद के हिसाब से आईओएस का पता लगाएं। उस पर और अधिक यहाँ ।

के लिए क्षमा याचना lukejackson और पिओट्र कोवालास्की , जिसका जवाब उपरोक्त कोड में संशोधित रूप में दिखाई देते हैं।

— jeff_mcmahan
स्रोत

यह मेरे iPad के एमुलेटर पर काम करता है जो iOS 11.2 पर चल रहा है। IOS 11.3 पर चलने वाले मेरे असली iPad पर यह काम नहीं करता है। मैंने एक कंसोल जोड़ा। यह सुनिश्चित करने के लिए कि घटनाओं को निकाल दिया गया है और इसलिए वे कंसोल में दिखाई देते हैं। यह iOS 11.3 के साथ कुछ करना है? या असली उपकरणों के साथ?

— मैथ्यू आर।

1

@MathieuR। यह iOS 11.3 इश्यू है। इसे एक addEventListenerआधारित उत्तर का उपयोग करके और इसके बजाय पैरामीटर के { passive: false }रूप में पास करके ठीक किया जा सकता optionsहै false। हालांकि, पिछड़े संगतता के लिए आपको पास करने की आवश्यकता है falseजब तक कि passiveविकल्प फ़ील्ड का समर्थन नहीं किया जाता है। देखें developer.mozilla.org/en-US/docs/Web/API/EventTarget/...

— जोश Gallagher

@JoshGallagher क्या आप एक कार्यशील उदाहरण प्रदान कर सकते हैं? IOS11 पर कोई भी जवाब मेरे लिए काम नहीं कर रहा है।

— मिक

IOS 12,2

— माइकल कैमडेन

5

मैं एक बहुत अच्छा समाधान के साथ आया था, लेकिन यह काम करने लगता है। मेरा लक्ष्य आकस्मिक डबल-टैप को रोकने के लिए ज़ूम इन के रूप में व्याख्या करने के लिए था, जबकि पहुंच के लिए काम करने के लिए चुटकी को ज़ूम करते हुए।

यह विचार पहले touchstartऔर दूसरे के बीच touchendएक डबल टैप में समय मापने और फिर अंतिम की व्याख्या करने के लिए touchendहोता है, यदि विलंब बहुत छोटा है। आकस्मिक ज़ूमिंग को रोकने के दौरान, यह विधि सूची को अप्रभावित रखने के लिए लगता है, जो अच्छा है। अगर मुझे कुछ याद नहीं है तो यकीन नहीं।

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

उत्परिवर्ती और जोसेफ के जवाब से एक जिस्ट से प्रेरित ।

— अलेक्जेंडर काचकेव
स्रोत

5

मेरे विशेष मामले में, मैं एक 3D दृश्य बनाने के लिए Babylon.js का उपयोग कर रहा हूं और मेरे पूरे पृष्ठ में एक पूर्ण स्क्रीन कैनवास शामिल है। 3D इंजन की अपनी जूमिंग कार्यक्षमता है लेकिन iOS पर चुटकी से ज़ूम इनका हस्तक्षेप होता है। मैंने अपनी समस्या को दूर करने के लिए @ जोसेफ उत्तर को अपडेट किया। इसे निष्क्रिय करने के लिए, मुझे पता चला कि मुझे इवेंट श्रोता के विकल्प के रूप में {passive: false} पास करना होगा। निम्नलिखित कोड मेरे लिए काम करता है:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

— हामेद
स्रोत

मेरा उपयोग मामला कस्टम चुटकी नियंत्रण के साथ एक पूर्ण पृष्ठ 3 डी दृश्य भी है। मैं डूब गया होता अगर Apple को स्पष्ट रूप से उपयोगकर्ता-स्केल की अनदेखी करने के लिए कोई वर्कअराउंड नहीं होता: कोई मेटा नहीं।

— निक बिलेक

1

यह जितना अजीब लगता है, कम से कम आईओएस 10.2 में सफारी के लिए, ज़ूम करने के लिए डबल टैप जादुई रूप से अक्षम है अगर आपके तत्व या इसके पूर्वजों में से कोई एक निम्न में से एक है:

एक onClick श्रोता - यह एक सरल noop हो सकता है।
cursor: pointerCSS में एक सेट

— mariomc
स्रोत

कैसे चुटकी के बारे में?

— सैम सु

दुर्भाग्य से, ज़ूम टू पिंच इस समाधान द्वारा कवर नहीं किया गया है। उसके लिए, हमने प्रस्तावित समाधान का उपयोग किया: stackoverflow.com/a/39594334/374196

— मारीओमेक

मेरे लिए काम नहीं करता है। मैं एक iPod टच पर 10.2.1 बीटा 4 का उपयोग कर रहा हूं और इस परीक्षण पृष्ठ का उपयोग कर रहा हूं और किसी भी ग्रे स्क्वॉयर के ज़ोम्स पर

— robocat

1

मैं एक प्रतिक्रिया अनुप्रयोग में एक अवधि पर है और यह काम नहीं करता है।

— एफएमडी

1

अनंतिम ज़ूमिंग तब होती है जब:

एक उपयोगकर्ता इंटरफ़ेस के एक घटक पर डबल टैप करता है
एक उपयोगकर्ता दो या अधिक अंकों (चुटकी) का उपयोग करके व्यूपोर्ट के साथ इंटरैक्ट करता है

डबल टैप व्यवहार को रोकने के लिए मैंने दो बहुत ही सरल वर्कआर्डर्स पाए हैं:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

ये दोनों सफारी (iOS 10.3.2) को बटन पर जूम करने से रोकते हैं । जैसा कि आप देख सकते हैं कि एक केवल जावास्क्रिप्ट है, दूसरा केवल CSS है। उचित रूप से उपयोग करें।

यहाँ एक डेमो है: https://codepen.io/lukejacksonn/pen/QMELXQ

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

— lukejacksonn
स्रोत

1

यह सरल काम मिला जिसके आसपास ज़ूम करने के लिए डबल क्लिक को रोकने के लिए प्रकट होता है:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

— वाक्य - विन्यास
स्रोत

1

अनुरोध के अनुसार, मैंने अपनी टिप्पणी को एक उत्तर में स्थानांतरित कर दिया है ताकि लोग इसे बढ़ा सकें:

यह iOS 13 के लिए 90% समय काम करता है:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

तथा

<meta name="HandheldFriendly" content="true">

— स्टर्लिंग बॉर्न
स्रोत

0

मैंने iOS (iPhone 6, iOS 10.0.2) पर अपने पृष्ठ के साथ अभ्यास में उपरोक्त सभी उत्तरों की जाँच की, लेकिन कोई सफलता नहीं मिली। यह मेरा कार्य समाधान है:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

— पियोत्र कोवल्स्की
स्रोत

दुर्भाग्य से यह केवल तभी काम करता है जब आपका पृष्ठ एकदम सही हो, न कि जब आपके पास स्क्रॉल करने योग्य सामग्री हो

— जूता

हम्म। यह मेरे अनुभव (iOS 10.3) में स्क्रॉल करने योग्य सामग्री के साथ ठीक काम करता है।

— jeff_mcmahan

0

यह मेरे लिए काम किया:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

— डिएगो सांता क्रूज़ मेंडेज़ू
स्रोत

मैंने यह कोशिश की, यह चुटकी को रोकने से रोकता है, हालांकि यह व्यूपोर्ट की टच स्क्रॉलिंग को अक्षम कर देता है ताकि आप पेज को ऊपर और नीचे स्क्रॉल न कर सकें।

— टीजीआर