मोबाइल सफारी पर आप व्यूपोर्ट ज़ूमिंग को कैसे निष्क्रिय करते हैं?

Question

मैंने इन तीनों को बिना किसी लाभ के आज़माया है:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

प्रत्येक वे अलग-अलग मूल्य हैं जो मैंने Google खोज या SO खोज द्वारा सुझाए हैं, लेकिन कोई भी ' उपयोगकर्ता-मापनीय = X ' मान काम नहीं करता है

मैंने अर्धविराम के बजाय मानों का परिसीमन करने की कोशिश की, कोई भाग्य नहीं। तब मैंने केवल user-scalableवर्तमान मूल्य होने की कोशिश की , फिर भी कोई भाग्य नहीं था।

---

अपडेट करें

एप्पल की साइट से यह मिल गया और यह काम करता है:

<meta name="viewport" content="width=device-width, user-scalable=no" />

यह पता चला है कि समस्या गैर-मानक उद्धरण थी क्योंकि मैंने मेटा टैग को एक वेबसाइट से कॉपी किया था जो उनका उपयोग कर रहा था, जो कि

Comments

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

— user2268788

हम मोबाइल वेब आधारित एप्लिकेशन पर ज़ूम को अक्षम कर रहे हैं। आप मूल iOS ऐप में ज़ूम नहीं कर सकते हैं और हमारे वेब एप्लिकेशन में इसकी आवश्यकता नहीं है। यदि आपकी साइट या ऐप मोबाइल से अनुकूलित है तो आपके उपयोगकर्ताओं को ज़ूम करने की आवश्यकता नहीं होगी। ज़ूम को अक्षम करने के लिए हमेशा उपयोग के मामले होते हैं। यह हमेशा एक ही रास्ता या दूसरा नहीं होता है।

— ब्रैडली फ्लड

हाँ, मैं तर्क की पंक्ति का अनुसरण नहीं कर रहा हूं जो मोबाइल अनुकूलित साइट पर ज़ूम को अक्षम करना एक बुरी बात है । व्यूपोर्ट गलती से पैन के आसपास खराब हो गया है क्योंकि स्क्रीन किसी ऐसे स्थान पर आकस्मिक पैन और जूम इनपुट उठा रही है जिसे आपको वैसे भी ज़ूम करने की आवश्यकता नहीं है। वास्तविक रूप से यदि आपके उपयोगकर्ताओं को आपके मोबाइल अनुकूलित साइट पर सामग्री में ज़ूम करने की आवश्यकता है, तो समस्या डिज़ाइन है, ज़ूम की कमी नहीं।

— नाथन हॉर्बी

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

— रयान

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

— user1751825

Answer 1

आपका कोड फैंसी डबल कोट्स के रूप में विशेषता दोहरे उद्धरण प्रदर्शित कर रहा है। यदि फैंसी उद्धरण आपके वास्तविक स्रोत कोड में मौजूद हैं, तो मुझे लगता है कि समस्या है।

यह मेरे लिए आईओएस 4.2 में मोबाइल सफारी पर काम करता है।

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Comments

यह फैंसी उद्धरण था, मैंने एक वेबसाइट से टैग को बिना सूचना के कॉपी किया था, इस बात के लिए धन्यवाद!

— मेटागुरु

शायद यह यहां लंबी पूंछ पर है, लेकिन यह इंगित करने योग्य हो सकता है कि इसे "शीर्ष स्तर" पृष्ठ पर लागू करने की आवश्यकता है। यदि आपके पास यह मेटा टैग एक आइफ्रेम पर लागू होता है, तो यह तब तक काम नहीं करेगा जब तक कि मेटा टैग को टॉप-मोस्ट पेज पर भी लागू न किया जाए।

— फाउंड्रमा

क्यों किसी को भी कभी सॉफ्टवेयर का एक टुकड़ा है कि फैंसी उद्धरण बनाता है मुझसे परे है।

— Traubenfuchs

@Traubenfuchs: टाइपोग्राफी।

— BoltClock

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

— डेविड

Answer 2

IOS 10 समाधान की तलाश में लोगों के लिए, user-scaleable=no लिए Safari में अक्षम किया गया है। इसका कारण यह है कि Apple वेब पेजों पर लोगों को ज़ूम करने की अनुमति देकर पहुंच में सुधार करने की कोशिश कर रहा है।

जारी नोटों से :

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

जहाँ तक मैं समझता हूँ, हम किस्मत से बाहर हैं।

Comments

Apple ने कितना भयानक निर्णय लिया। IOS सफ़ारी पर पेज को बार-बार आउट-आउट करने के लिए एक संख्या को "घटाने" / बढ़ाने के लिए "-" और "+" बटन वाले स्पिनर का उपयोग करना। प्रेस को ज़ूम करने के लिए कोई रास्ता नहीं होने के साथ ज़ूम करने के लिए डबल-टैप के रूप में व्याख्या की जा रही है। iOS क्रोम पूरी तरह से काम कर रहा है। निराशा होती।

— पॉल

हालाँकि मैं उस फैसले से कतरा रहा हूँ लेकिन मैं एक उपयोगकर्ता के रूप में ऐप्पल से वास्तव में खुश हूँ क्योंकि मैं इस सुविधा को बहुत सारी वेबसाइटों में लागू करना चाहता था जो अंदर छोटे तत्वों का उपयोग कर रही थीं।

— बिशोय हन्ना

दुनिया नरक जा रही है

— छोटे छोटे आदमी

ओह जीज़, किसने अनुमान लगाया होगा? Apple द्वारा बनाई गई एक और हास्यास्पद पसंद

— एमिल पेडरसन

Apple के लिए इसे एक्सेसिबिलिटी सेटिंग्स में केवल एक विकल्प जोड़ने के बजाय सभी पर "सुविधा" को लागू करने के लिए छोड़ दें ...

— Lennholm

Answer 3

@mattis सही है कि iOS 10 सफारी आपको उपयोगकर्ता-स्केलेबल विशेषता के साथ ज़ूम करने के लिए चुटकी को अक्षम करने की अनुमति नहीं देगा। हालाँकि, मुझे 'जेस्चरस्टार्ट' ईवेंट पर preventDefault का उपयोग करने को अक्षम करने के लिए मिला। मैंने इसे केवल iOS 10.0.2 में सफारी पर सत्यापित किया है।

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

Comments

IOS 10 पर, मैंने पाया कि यह काम करता है, लेकिन यदि आप पृष्ठ को स्क्रॉल करते हैं और फिर स्क्रॉल करते समय चुटकी-ज़ूम करते हैं, तो यह ज़ूम को अनुमति देता है। फिर आप अपने आप को नए जूम स्तर पर तब तक स्थिर पाते हैं जब तक आप फिर से स्क्रॉल नहीं करते। जब तक आपके पेज की बॉडी स्क्रॉल नहीं होती है, तब तक यह एक अच्छे समाधान की तरह नहीं दिखता है। :(

— रैंड स्कलार्ड

एक चेतावनी: उपयोगकर्ता अभी भी स्क्रीन को डबल टैप कर सकता है जो ज़ूम / कर सकता है और इसके द्वारा पकड़ा नहीं जाता है।

— स्टीफन

फिर भी कभी-कभी स्क्रीन को डबल-टैप करके ज़ूम करने की अनुमति देता है। :(

— जारजका

"डबल टैप" किसके बराबर है gesturestart? dblclick ?

— लोटेकसून

एक अन्य नोट, यदि आप ज़ूमिंग के डबल टैप पहलू को अक्षम करना चाहते हैं। मोबाइल सफारी 'टच-एक्शन: मैनिपुलेशन' का भी समर्थन करती है, जो 'बेसिक सपोर्ट' के तहत आती है, जो डबल टैप इवेंट्स को निष्क्रिय कर देती है। यहाँ पर डॉक्यूमेंटेशन: developer.mozilla.org/en-US/docs/Web/CSS/touch-action

— jememypress

Answer 4

iOS 10 के लिए आईफ़ोन सफारी के लिए "व्यूपोर्ट" एक समाधान नहीं है, मुझे यह पसंद नहीं है, लेकिन मैंने इस जावास्क्रिप्ट कोड का उपयोग किया है और इसने मेरी मदद की

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

Comments

यह होना चाहिएevent.scale !== 1

— aleclarson

@aleclarson event.scale> 1 हालत event.scale == 1 शामिल!

— आर्थर Tsidkilov

मोबाइल सफारी पर ज़ूम करने से रोकने के लिए @aleclarson यह पर्याप्त है, मैंने लिखा है कि मुझे यह पसंद नहीं है, आम तौर पर इसके लिए व्यूपोर्ट का उपयोग करना पड़ता है, लेकिन आईओएस 6 और उच्चतर पर यह काम नहीं कर रहा है (मुझे लगता है कि आपका event.scale == 1 अधिक सही होना चाहिए, लेकिन यह सब सही नहीं है, यह हैकिंग की तरह है)

— आर्थर त्सिडिलकोव

@aleclarson का उपयोग कर लगता है! == Android 4.4 में देशी ब्राउज़र को तोड़ता है; event.scale अपरिभाषित है।

— जेम्स पिज़ुरो

@JamesPizzurro हाँ, आप उपयोग कर सकते हैंevent.scale !== undefined && event.scale !== 1

— aleclarson

Answer 5

user-scalable=0

यह अब iOS 10 पर काम नहीं करता। Apple ने इस फीचर को हटा दिया।

जब तक आप सकल प्लेटफ़ॉर्म ऐप नहीं बनाते हैं, तब तक iOS पर ज़ूम वेबसाइट को अक्षम करने का कोई तरीका नहीं है।

Comments

इस तरह के एक bummer ... किसी भी विचार क्यों वे इसे हटा दिया?

— स्टीफन टेट्रौल्ट

@sm वे वेब अनुभव नहीं चाहते कि ऐप स्टोर पर ऐप अनुभव के साथ प्रतिस्पर्धा करें।

— मारविन Danig

@marvindanig हाँ ... चूंकि वे एक ऐप बनाने के लिए 99 $ शुल्क लेते हैं जो आसानी से सभी प्लेटफ़ॉर्म पर एक अधिक सुलभ वेब पेज एप्लिकेशन बनाया जा सकता है। इसके अलावा Apple एक "वेब अनुभव" को पसंद नहीं कर सकता है, अगर इसका मतलब है कि उपयोगकर्ता + देव दीवार वाले बगीचे से बच सकते हैं। Apple की शक्ति और धन के बारे में इसके सभी :(

— humanityandpeace

वास्तव में नए iOS संस्करणों पर यह काम करना संभव है। मेरा उत्तर देखें: stackoverflow.com/a/62165035

— फेरस

Answer 6

निम्नलिखित को अपने सिर-टैग में जोड़ने का प्रयास करें:

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

इसके साथ ही

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

अंत में, या तो एक शैली-विशेषता के रूप में या अपनी सीएसएस फ़ाइल में, वेबकिट-आधारित ब्राउज़रों के लिए निम्न पाठ जोड़ें:

html {
    -webkit-text-size-adjust: none
}

Comments

नए iOS संस्करणों पर काम नहीं करता है

— फेरस

Answer 7

मुझे यह निम्नलिखित कोड के साथ iOS 12 में काम कर रहा है:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

यदि मैं यह सुनिश्चित करता हूं कि पहली स्टेटमेंट के साथ यह केवल iOS वातावरण में निष्पादित होगा (यदि यह एंड्रॉइड में निष्पादित होता है तो स्क्रॉल beivivour टूट जाएगा)। इसके अलावा, passiveविकल्प पर ध्यान दें false।

Comments

मेरे iOS 12.3.1 पर काम नहीं, यहाँ परीक्षण लिंक है: https://output.jsbin.com/liqiraj

— Jess

Answer 8

यह IOS 10.3.2 में ठीक काम करता है

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

शुक्रिया @arthur और @aleclarson

Comments

iOS 13 झूठ को {निष्क्रिय: गलत} में बदल देता है

— Wayofthefuture

Answer 9

मैं HTML शीर्षलेख में निम्न जोड़कर इस व्यवहार को रोकने में कामयाब रहा। यह मोबाइल डिवाइसों पर काम करता है, क्योंकि डेस्कटॉप ब्राउज़र माउस व्हील का उपयोग करते समय ज़ूमिंग का समर्थन करते हैं। यह डेस्कटॉप ब्राउज़र पर एक बड़ी बात नहीं है, लेकिन इसे ध्यान में रखना महत्वपूर्ण है।

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

और सीएसएस स्टाइलशीट के लिए निम्नलिखित नियम

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

Comments

नए iOS संस्करणों पर काम नहीं करता है

— फेरस

Answer 10

कभी-कभी contentटैग में मौजूद अन्य निर्देश ऐप्पल के सबसे अच्छे अनुमान / अनुमान को गड़बड़ कर सकते हैं कि कैसे अपने पेज को लेआउट करें, आपको बस चुटकी को निष्क्रिय करने की आवश्यकता है।

<meta name="viewport" content="user-scalable=no" />

Comments

नए iOS संस्करणों पर काम नहीं करता है

— फेर

Answer 11

सफारी 9.0 और अप में आप नीचे दिखाए गए व्यूपोर्ट मेटा टैग में हटना-फिट होने का उपयोग कर सकते हैं

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Comments

नए iOS संस्करणों पर काम नहीं करता है

— फेर

Answer 12

मैं मूर्खतापूर्ण रूप से एक रैपर div था जिसकी चौड़ाई पिक्सेल में मापी गई थी। इससे निपटने के लिए अन्य ब्राउज़र काफी बुद्धिमान लग रहे थे। एक बार जब मैंने चौड़ाई को प्रतिशत मूल्य में बदल दिया, तो उसने सफारी मोबाइल पर भी ठीक काम किया। बहुत कष्टप्रद।

.page{width: 960px;}

सेवा

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Answer 13

CSS का उपयोग करना touch-action संपत्ति का सबसे सुरुचिपूर्ण समाधान है। IOS 13.5 पर परीक्षण किया गया।

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

body {
  touch-action: pan-x pan-y;
}

अगर आपके ऐप में भी पैनिंग की जरूरत नहीं है , यानी स्क्रॉल करें, तो इसका इस्तेमाल करें:

body {
  touch-action: none;
}

Answer 14

WAI WCAG 2.0 AA एक्सेसिबिलिटी आवश्यकताओं के अनुपालन के लिए आपको कभी भी चुटकी ज़ूम को अक्षम नहीं करना चाहिए । (WCAG 2.0: SC 1.4.4 आकार परिवर्तन पाठ स्तर AA)। आप इसके बारे में यहां और अधिक पढ़ सकते हैं: मोबाइल एक्सेसिबिलिटी: कैसे WCAG 2.0 और अन्य W3C / WAI दिशानिर्देश मोबाइल पर लागू होते हैं, 2.2 ज़ूम / आवर्धन

Comments

यह एक उत्तर नहीं है .. और कई क्लाइंट अभी भी ज़ूम ब्लॉक करने के लिए कहते हैं .. इसलिए मैं इसे एक सामान्य नियम के रूप में नहीं ले सकता हूं

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

— ब्रूनो फिंगर

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

— user128216

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

— चकोर ले बट

मैं कहूँगा कि html / जावास्क्रिप्ट ऐप में, वे दिशानिर्देश लागू नहीं होते हैं। आखिर, क्या कोई देशी ऐप आपको ज़ूम इन और आउट करने देगा?

— जॉर्गन सिगवार्डसन

Answer 15

यह एक iPhone पर काम करना चाहिए आदि।

<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">