मैं मोबाइल वेब पेज पर "अक्षम" ज़ूम कैसे कर सकता हूं?

Question

मैं एक मोबाइल वेब पेज बना रहा हूं जो मूल रूप से कई टेक्स्ट इनपुट के साथ एक बड़ा रूप है।

हालाँकि (कम से कम मेरे एंड्रॉइड सेलफोन पर), हर बार जब मैं कुछ इनपुट पर क्लिक करता हूं तो पूरा पेज ज़ूम हो जाता है, बाकी पेज को देखते हुए। क्या इस तरह के ज़ूम को moble वेब पेजों पर अक्षम करने के लिए कुछ HTML या CSS कमांड है?

Comments

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

— tomasz86

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

— ल्यूक

आप नहीं करते हैं - यदि उपयोगकर्ता ज़ूम करना चाहते हैं तो उन्हें करने दें। इसके अलावा: Chrome के पास आपके अनुरोध को अनदेखा करने का एक विकल्प है।

— मार्टिन

एंड्रॉइड फ़ायरफ़ॉक्स उपयोगकर्ताओं के लिए, फ़ायरफ़ॉक्स ऐड-ऑन के लिए ऑलवेज ज़ूम है । अत्यधिक सिफारिशित।

— कॉलिन डी बेनेट

से आईओएस 10 , user-scalable=noनजरअंदाज कर दिया है। देखें इस

— रैप्टर

Answer 1

यह आपकी जरूरत की हर चीज होनी चाहिए

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

Comments

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

— मैट लोहकैंप

अभी पोस्टीरियर में किसी ने ऐसा किया है, जबकि 12px पर फ़ॉन्ट होने के कारण यह अपठनीय है और मुझे इसके आसपास कोई रास्ता नहीं मिल रहा है।

— एमिल इवानोव

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

— जैक मार्शेट्टी

दूसरा मेटा टैग क्या करता है? width=device-widthपहले मेटा टैग में पहले से ही नहीं है ?

— ल्यूक

यह iOS 7 पर काम नहीं करता है। lukad03 उत्तर देखें

— davivid

Answer 2

आप पार्टी के लिए देर से आने वालों के लिए, किक्रेटेरिज का जवाब मेरे लिए काम नहीं करता है और बेनी न्युगबॉएर के जवाब में लक्ष्य-घनत्वडीपी (एक विशेषता है जिसे पदावनत किया जा रहा है) ) शामिल है।

हालांकि यह मेरे लिए काम करता है:

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

Comments

यह अब सही उत्तर है। अन्य उत्तर अब काम नहीं करते (कम से कम iOS 7 के लिए)।

— काइलफ़ारिस

किसी ने iOS 10 पर यह कोशिश की। मुझे नहीं लगता कि यह काम कर रहा है?

— JMac

मेरे लिए काम नहीं करता है। इसने स्क्रॉलबार और खराब ज़ूम के साथ सभी स्क्रीन का आकार बदला।

— कोकिको डे

अभी भी Apple पर SFB मुद्दे के कारण Safari / iOS 11 पर काम नहीं कर रहा है।

— 15ee8f99-57ff-4f92-890c-b56153

Answer 3

यहां कई तरह के दृष्टिकोण हैं- और हालांकि स्थिति यह है कि आम तौर पर उपयोगकर्ताओं को प्रतिबंधित नहीं किया जाना चाहिए, जब यह एक्सेस करने के उद्देश्यों के लिए ज़ूमिंग की बात आती है, तो ऐसी आवश्यकता हो सकती है जहां यह आवश्यक हो:

पृष्ठ को डिवाइस की चौड़ाई पर रेंडर करें, न ही स्केल:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

स्केलिंग रोकें- और उपयोगकर्ता को ज़ूम करने में सक्षम होने से रोकें:

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

सभी ज़ूमिंग को हटाकर, सभी स्केलिंग

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Comments

"आमतौर पर उपयोगकर्ताओं को प्रतिबंधित नहीं किया जाना चाहिए" लेकिन मोबाइल के लिए वेब ऐप विकसित करते समय आपको अक्सर "zom-in इनपुट फ़ोकस" से निपटना पड़ता है। मुझे उस मामले में जूमिंग को निष्क्रिय करने में मददगार लगता है।

— ले 'निटन

@ Le'nton पूरे पृष्ठ पर ज़ूमिंग को अक्षम करना इनपुट फोकस पर ज़ूम से निपटने का एक अच्छा तरीका नहीं है। IOS पर कम से कम, इनपुट फ़ोकस ज़ूम को इनपुट के फ़ॉन्ट आकार को बढ़ाकर अक्षम किया जा सकता है।

— पीपीएफ

Answer 4

आप उपयोग कर सकते हैं:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

लेकिन कृपया ध्यान दें कि एंड्रॉइड 4.4 के साथ संपत्ति लक्ष्य-घनत्वडीपी अब समर्थित नहीं है । तो एंड्रॉइड 4.4 के लिए और बाद में निम्नलिखित को सर्वोत्तम अभ्यास के रूप में सुझाया गया है:

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

Answer 5

चूंकि अभी भी प्रारंभिक समस्या का कोई समाधान नहीं है, यहां मेरा शुद्ध CSS दो सेंट है।

मोबाइल ब्राउज़र (उनमें से ज्यादातर) को 16px होने के लिए इनपुट में फ़ॉन्ट-आकार की आवश्यकता होती है। इसलिए

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

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

यदि मोबाइल पर आपका आधार फ़ॉन्ट-आकार 16px या 16px नहीं है, तो आप मीडिया क्वेरी का उपयोग कर सकते हैं।

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

Comments

इस समाधान के पास इतने कम वोट क्यों हैं? यह फ़ॉर्म-क्लिक ज़ूमिंग से बचने का सबसे अच्छा तरीका है।

— क्लॉससीपीएच

हाँ; यह मेरी समस्या को हल कर दिया! मैं पूरी तरह से जूमिंग को निष्क्रिय नहीं करना चाहता था और मुझे बस यही चाहिए था।

— ब्रेंडन

आप font-size: 1remपूरे पृष्ठ के लिए भी सेट कर सकते हैं , इसलिए फॉन्ट स्केल को "फोकस-ऑन-ज़ूम" समस्या से बचने के साथ-साथ।

— इताची

Answer 6

कृपया इस मेटा-टैग और शैली को जोड़ने का प्रयास करें

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


<style>
body{
        touch-action: manipulation;
    }
</style>

Comments

touch-actionसेट नहीं होना चाहिए none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ मेरे लिए rahulroy9202 touch-action: manipulation;ठीक काम किया। touch-action: none;कुछ भी नहीं किया

— उमैर

Answer 7

लगता है कि बस मेटा टैग को index.html में जोड़ना पेज को जूम करने से नहीं रोकता है। नीचे शैली जोड़ने से जादू हो जाएगा।

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

संपादित करें: डेमो: https://no-mobile-zoom.stackblitz.io

Comments

इसे ठीक किया जाना चाहिए, मोबाइल सफारी ios13 atm पर भी काम करना चाहिए

— Magico

यह मोबाइल से अपेक्षित रूप से काम कर रहा है, धन्यवाद! यहाँ देखें proyecto26.com/animatable-component

— jdnichollsc

Answer 8

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

अपने ऐप को "वेब ऐप सक्षम" घोषित करने के लिए इन मेटा टैग्स को जोड़ें:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

हालाँकि केवल इस सुविधा का उपयोग करें यदि आपका ऐप स्वयं स्थायी है, क्योंकि आगे / पीछे बटन और URL बार असमान है क्योंकि साझाकरण विकल्प अक्षम हैं। (आप अभी भी बाएं और दाएं स्वाइप कर सकते हैं) हालांकि यह दृष्टिकोण काफी एप को सक्षम बनाता है जैसे ux। फ़ुलस्क्रीन ब्राउज़र केवल तब शुरू होता है जब साइट होमस्क्रीन से लोड होती है। मेरे रूट फ़ोल्डर में एक ऐप्पल-टच-आइकन-180x180.png शामिल करने के बाद मुझे केवल यह काम करने के लिए मिला।

एक बोनस के रूप में, आप शायद इस aswell का एक संस्करण भी शामिल करना चाहते हैं:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

Answer 9

आप अपने 'सिर' में निम्नलिखित 'मेटा' तत्व को जोड़कर कार्य को पूरा कर सकते हैं:

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

'चौड़ाई', 'प्रारंभिक-स्केल', 'अधिकतम-चौड़ाई', 'अधिकतम-पैमाने' जैसी सभी विशेषताओं को जोड़ने से काम नहीं हो सकता है। इसलिए, बस उपरोक्त तत्व जोड़ें।

Answer 10

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

कृपया चुटकी में स्क्रिप्ट जोड़ें, टैप करें, ज़ूम करें पर ध्यान केंद्रित करें