यदि आप सबसे सामान्य HTML व्यूपोर्ट मेटा सेटिंग्स का उपयोग करते हैं, तो इनपुट तत्व पर क्लिक करने से iOS उपकरणों पर स्वतः ज़ूम ट्रिगर हो जाएगा। कम से कम स्मार्टफोन पर। मैंने सफारी और क्रोम ब्राउज़र का उपयोग करके आईफोन 4, 5 और 6 पर इसका परीक्षण किया है। मेरे शोध के आधार पर यह सभी iOS उपकरणों के लिए समान है।
यह HTML कोड ऑटो ज़ूम प्रभाव होने देता है:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />लेकिन यह ऑटो जूम प्रभाव हमेशा वांछनीय नहीं होता है। कभी-कभी यह आपके वेब ऐप की उपयोगिता को नुकसान पहुंचाएगा। यह पूरी तरह से संदर्भ पर निर्भर करता है।
सफारी और क्रोम दोनों पर इस प्रभाव को अक्षम करने के लिए, आप इसके बजाय निम्नलिखित का उपयोग कर सकते हैं:
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
एकमात्र नया कोड यह है कि हमने maximum-scale=1 . मान जोड़ा है मेटा content . के लिए विशेषता।
महत्वपूर्ण
यह मैन्युअल रूप से . के विकल्प को अक्षम नहीं करता है सफारी में ज़ूम इन और आउट। यह केवल ऑटो ज़ूम फ़ंक्शन को अक्षम करता है।
लेकिन Chrome के मोबाइल ब्राउज़र में (iOS उपकरणों पर), यह करता है मैन्युअल ज़ूम विकल्प को अक्षम करें। आपके उपयोग के मामले के आधार पर यह एक समस्या हो सकती है।
मुझे अभी तक एक शुद्ध HTML समाधान नहीं मिला है जो आपको क्रोम में मैन्युअल ज़ूम रखने की अनुमति देता है। अगर मैं ऐसा करता हूं तो मैं इस लेख को अपडेट करूंगा।
बहुत आसान उपाय
यदि आप अपने इनपुट तत्वों को डिफ़ॉल्ट 11px के विपरीत 16px का न्यूनतम फ़ॉन्ट आकार देते हैं, तो यह Safari और Chrome दोनों पर स्वतः ज़ूम प्रभाव को हटा देगा। कम से कम इसने मेरे परीक्षणों में किया।
इस पद्धति से, आप अपनी सामग्री विशेषता में अधिकतम-स्केल-1 मान जोड़ने से बच सकते हैं और इस प्रकार क्रोम में मैन्युअल ज़ूम को प्रतिबंधित करने से बच सकते हैं
रुको, आपने पहले इस समाधान का सुझाव क्यों नहीं दिया?
ठीक है, हो सकता है कि आप मोबाइल पर अपने सभी इनपुट फ़ील्ड पर 16px फ़ॉन्ट आकार का उपयोग नहीं करना चाहें। यह आपको अपने इनपुट फ़ील्ड को समायोजित करने के लिए अपने मोबाइल UI की टाइपोग्राफी को अनुकूलित करने के लिए बाध्य करेगा।
और बहुत कुछ के साथ, इस मुद्दे को जावास्क्रिप्ट का उपयोग करके प्रोग्रामेटिक रूप से हल किया जा सकता है, लेकिन यह इस लेख के दायरे से बाहर है।
साथ ही, सावधान रहें कि अपने उपयोगकर्ताओं को ज़ूम करने से प्रतिबंधित करने की सामान्य रूप से सलाह नहीं दी जाती है। W3Schools पर अधिक जानकारी। लेकिन फिर से, यह संदर्भ पर निर्भर करता है।
यह अच्छा होगा यदि कोई सरल सेटिंग हो जो एक ही बार में सभी उपकरणों पर इस समस्या का समाधान कर सके। यदि आपके पास इस विषय पर कोई अंतर्दृष्टि है, तो बेझिझक मुझे नीचे टिप्पणी अनुभाग में बताएं :-)