दिलचस्प पोस्ट
कैसे एक अल्पविराम से अलग स्ट्रिंग विभाजित करने के लिए? WPF INotifyPropertyChanged कैसे काम करता है? सी # – एक डाटा बॉक्स के साथ एक कॉम्बो बॉक्स भरें यूट्यूब iframe खिलाड़ी एपीआई – ऑनस्टेट चेंज नहीं फायरिंग एक सकारात्मक लैम्ब्डा: '+ {}' – यह क्या जादू है? रनटाइम पर भाषा बदलने का सही तरीका सी # में टेम्पलेट विशेषज्ञता कैसे करें फेसबुक कनेक्ट और एएसपी.नेट Memcached बनाम Redis? jQuery: एक छवि को रंग (टिंट) लागू करने का एक तरीका है? $ स्थान / html5 और हैशबैंग मोड / लिंक रीरलाईटिंग के बीच स्विचिंग मैं कैसे कुंजी से एक शब्दकोश सॉर्ट कर सकते हैं? एक वेबफ़ॉर्म के अंदर एक आंशिक दृश्य कैसे शामिल करें एचटीटीपीएसर्वेटरेक्स्ट से जेएसओएन ऑब्जेक्ट को प्राप्त करना ScrollView के अंत का पता लगाएं

व्यूपोर्ट आईओएस 10 + सफारी ज़ूमिंग अक्षम करें?

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


आईओएस 11 रिलीज पर अपडेट किया गया, आईओएस 11 सफारी अभी भी user-scalable=no मेटा टैग का सम्मान नहीं करते हैं।

वेब के समाधान से एकत्रित समाधान "व्यूपोर्ट आईओएस 10 + सफारी ज़ूमिंग अक्षम करें?"

आईओएस 10 में यह एक नई सुविधा है

आईओएस 10 बीटा 1 रिलीज नोट्स से:

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

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

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

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

आप इस तरह से कुछ के साथ चुटकी से ज़ूम को रोक सकते हैं:

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

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

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

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

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

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

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

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

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

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

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

टच-ओव इवेंट में स्केल फ़ैक्टर के लिए चेक करें, फिर टच इवेंट रोकें।

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

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

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

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

सुनिश्चित करें कि आपने अपने पृष्ठ में हैमर.जे शामिल किया है और फिर इस जासूस को कहीं से सिर पर चिपकाने का प्रयास करें:

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

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

 $(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 चुटकी ज़ूम को अक्षम करता है

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

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

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

सूचना: आईओएस-आपकी पसंद के बारे में पहचान करें। उस पर और भी अधिक


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

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

  1. एक onClick श्रोता – यह एक सरल शराबी हो सकता है
  2. cursor: pointer सीएसएस में cursor: pointer सेट

मैंने अपने सभी पेजों को आईओएस (आईफोन 6, आईओएस 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)' } }); 

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

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

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

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

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

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

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

इस साधारण कार्य के आस-पास लगभग ज़ूम करने के लिए डबल क्लिक को रोकना प्रतीत होता है:

  // 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); 

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

यह विचार पहली बार touchstart बीच के समय को मापने में 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(); } }); 

उत्परिवर्ती और यूसुफ के जवाब से एक सार से प्रेरित होकर।