इनपुट "टेक्स्ट" टैग में ऑटो ज़ूम अक्षम करें - iPhone पर सफारी

Question

मैंने एक HTML पृष्ठ बनाया जिसमें एक <input>टैग है type="text"। जब मैं iPhone पर Safari का उपयोग करके उस पर क्लिक करता हूं, तो पृष्ठ बड़ा (ऑटो ज़ूम) हो जाता है। क्या किसी को पता है कि इसे कैसे निष्क्रिय करना है?

Comments

सभी ट्विटर बूटस्ट्रैप उपयोगकर्ताओं के लिए यहां उतरना: यह गितुब मुद्दा भी देखें ।

— जेरोइन

मुझे लगता है कि @daxmacrog का उत्तर ठीक वही है जो आप चाहते हैं, क्या आप इसे स्वीकार करने के लिए तैयार हैं ताकि यह शीर्ष पर पहुंच सके और इन सभी के माध्यम से पढ़ने वाले लोगों से बहुत सारे काम बचा सके? 2018 उत्तर: stackoverflow.com/a/46254706/172651

— विकसित

@ आपके द्वारा एंड्रॉइड पिंच और जूम फंक्शनलिटी को तोड़ने के बारे में बोले गए उत्तर को हल करें। daxmacrog उत्तर त्रुटिपूर्ण है।

— MH

मैं कसम खाता हूँ, Apple हमारे सिर के साथ गड़बड़ करने के लिए इन विरोधी सुविधाओं को बनाता है।

— एंड्रू कोस्टर

@AndrewKoster, मैं 2020 में अब भी आपसे सहमत हूं।

— अशोक

Answer 1

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

इसके अतिरिक्त, selectतत्व को focusछद्म श्रेणी संलग्न करनी होगी ।

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

यह सब से ऊपर का उपयोग करने के लिए आवश्यक नहीं है तुम बस शैली तत्वों की जरूरत है सकते हैं, जैसे: बस text, numberऔर textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

अभिभावक शैली से इनपुट तत्वों को प्राप्त करने के लिए वैकल्पिक समाधान:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Comments

बस सब कुछ कवर करने के लिए: select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; }

— निक बारबियर

@ आपको उपयोग करने की आवश्यकता है select:focus। एक ही मुद्दा रहा था।

— DGBbs

मुझे समझ नहीं आ रहा है, यह कैसे ठीक है? यदि मुझे छोटा / बड़ा फ़ॉन्ट आकार चाहिए तो क्या होगा?

— ब्रायन

उचित तरीका मेटा टैग बदलने के लिए है: <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1, अधिकतम-स्केल = 1, उपयोगकर्ता-स्केलेबल = 0" />

— मिलोस मैटिक

@MilosMatic ज्यादातर मामलों में एक अच्छा समाधान नहीं है, क्योंकि यह उपयोगकर्ता को पेज को स्केल करने से पूरी तरह से रोकता है। संभावित रूप से आपके आगंतुकों के लिए और भी अधिक कष्टप्रद।

— BadHorsie

Answer 2

आप यूजर इनपुट के दौरान टेक्स्ट फ़ील्ड को अपने आप ज़ूम इन करने से रोक सकते हैं , उपयोगकर्ता की क्षमता को ज़ूम को चुटकी में अक्षम किए बिना । बस जोड़ें, maximum-scale=1लेकिन अन्य उत्तरों में सुझाए गए उपयोगकर्ता-स्केल विशेषता को छोड़ दें।

यह एक सार्थक विकल्प है यदि आपके पास एक ऐसी परत है जिसमें ज़ूम होने पर "फ़्लोट" होता है, जिससे महत्वपूर्ण UI तत्व स्क्रीन को स्थानांतरित कर सकते हैं।

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

Comments

यह 2018+ समाधान है। अपने जीवन की तरह इस पर निर्भर करता है।

— हेनरिक पीटरसन

इससे एंड्रॉइड डिवाइस जूम करने की क्षमता टूट जाएगी

— fen1ksss

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

— fen1ksss

@HenrikPetterson यह ओपी द्वारा निर्दिष्ट ऑटो-ज़ूम को अक्षम करने से अधिक है, यह चुटकी ज़ूम को भी अक्षम करता है। इसलिए मुझे नहीं लगता कि यह 2018+ समाधान है।

— एंड्रे वेर्लंग

@ AndréWerlang यह सटीक नहीं है। जैसा कि उत्तर में स्पष्ट रूप से कहा गया है, यह समाधान सफारी (या फ़ायरफ़ॉक्स) में चुटकी ज़ूम को अक्षम नहीं करता है, जो कि ओपी के बारे में पूछा गया है। लेकिन जैसा कि पिछली टिप्पणियों में बताया गया है, यह एंड्रॉइड डिवाइसों पर और iOS पर क्रोम में उपयोगकर्ता ज़ूम को अक्षम करता है।

— daxmacrog सेप

Answer 3

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

नई: IOS तब भी ज़ूम करेगा, जब तक आप फ़ोकस के बिना इनपुट पर 16px का उपयोग नहीं करते।

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

मैंने तब बैकग्राउंड जोड़ा जब से IOS सिलेक्ट पर कोई बैकग्राउंड नहीं जोड़ता।

Comments

यह न केवल iOS (iphone / ipad / ipod) पर सफारी के लिए काम करता है, बल्कि Safari / OSX और Chrome (विंडोज़ और मैक) पर भी काम करता है। इसलिए यदि आप विशेष रूप से iphone को लक्षित करने की कोशिश कर रहे हैं, तो यह काम नहीं करेगा।

— रेडटॉपिया

क्यों हर कोई 16px कह रहा है, लेकिन कोई भी यह उल्लेख करने की परवाह नहीं करता है कि वास्तव में यह 16px क्यों है? ऐसी मनमानी संख्या क्यों? हमें अपना फॉर्म फील्ड टेक्स्ट साइज 16px पर क्यों सेट करना है और क्या नहीं .. 1.8rem या 2.5em या ऐसा कहें? क्या यह एक मालिकाना ओएस से सिर्फ एक बेवकूफ बग है?

— बीबी जूल

@Beebee 100% फ़ॉन्ट का आकार 16px है, जो कि अधिकांश ब्राउज़रों (डेस्कटॉप भी) के लिए डिफ़ॉल्ट है। IOS इसका उपयोग डिफ़ॉल्ट रूप में शायद इसलिए करता है क्योंकि यह पढ़ने के लिए एक आरामदायक आकार है। यह इस तरह सेट किया गया है कि मैंने देखने की जहमत नहीं उठाई, परवाह नहीं की।

— क्रिस्टीना

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px)प्रभाव को iPhone तक सीमित करने के लिए उपयोग करें , लेकिन Chrome में देखे जाने पर वेबसाइटों को संशोधित न करें।

— बर्निनलियो

मीडिया क्वेरी का उपयोग करने के बजाय, आपको उपयोग करना चाहिए @supports (-webkit-overflow-scrolling: touch), क्योंकि यह css सुविधा केवल iOS पर मौजूद है

— जेम्स मोरन

Answer 4

यदि आपकी वेबसाइट को एक मोबाइल डिवाइस के लिए ठीक से डिज़ाइन किया गया है, तो आप तय कर सकते हैं कि स्केलिंग की अनुमति न दें।

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

यह समस्या हल करती है कि आपका मोबाइल पृष्ठ या फ़ॉर्म चारों ओर 'फ़्लोट' करने जा रहा है।

Comments

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

— फेर

"उचित रूप से डिज़ाइन किया गया" बहुत व्यक्तिपरक है। एक साइट के शीर्ष पर एक निश्चित, 50px हेडर पर विचार करें जो पूरी तरह से उत्तरदायी है और सभी ब्राउज़रों में काम करना चाहिए। आईओएस सफारी में ज़ूम करने से हेडर की स्थिति टूट जाती है और बहुत सारी साइट टूट जाती है।

— रेडटॉपिया

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

— गैब्रियल लुथेजे

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

— जोतव

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

— रयान विलियम्स

Answer 5

सारांश में उत्तर है: फॉर्म तत्वों के फ़ॉन्ट आकार को कम से कम 16px पर सेट करें

Comments

हां, मोबाइल उपकरणों पर ज़ूम करने से बचने के लिए यह निश्चित रूप से सबसे अच्छा अभ्यास है। कोई js, कोई hacks, कोई workarounds बिल्कुल नहीं। लेकिन यहां तक ​​कि 16px के साथ मैंने अपने पृष्ठों में बहुत कम ज़ूम देखा, इसलिए मैंने 17px, 18px ... देखने की कोशिश की कि क्या होता है।

— ed1nh0

शरीर, बटन, इनपुट, टेक्स्टारिया और चुनिंदा तत्वों पर 100% घोषित करना सबसे अच्छा अभ्यास है। यह उपयोगकर्ता को डिफ़ॉल्ट सेट करने की अनुमति देता है जो कि ब्राउज़र के साथ 16px अपलोड नहीं है। कोई ऐसा व्यक्ति जिसे स्क्रीन पर पढ़ने में परेशानी हो, तो वह अपना डिफ़ॉल्ट 18px या 20px पर सेट कर सकता है। आप उन पर 16px को मजबूर करके उनकी पसंद को ओवरराइड नहीं करना चाहते हैं। जब यह आईओएस की बात आती है, हालांकि, उन्होंने अपने एचआईजी के किसी भी मूल्य को बहुत छोटा करने का निर्णय लिया है। दुर्भाग्य से ऐसा लगता है कि यह 100% मूल्य की व्याख्या नहीं करता है, इसलिए हम इसे तुष्ट करने के लिए डिफ़ॉल्ट में जोड़ रहे हैं।

— जे। हॉग

आरई आईओएस सफारी, इस टिप्पणी के अनुसार, यह प्रतीत होता है कि सफारी सही ढंग से font-size: 100%मूल्य की व्याख्या करता है और आवश्यक 16px को पकड़ लेता है।

— नाथन लॉफर्टी

Answer 6

input[type='text'],textarea {font-size:1em;}

Comments

ध्यान दें कि उपयोगकर्ता-स्केलेबल की स्थापना सभी ज़ूमिंग को अक्षम नहीं करेगी, जो संभवतः एक बुरा विचार है।

— तूफान

यह केवल तभी काम करता है जब आपके शरीर का फ़ॉन्ट आकार डिफ़ॉल्ट (संयुक्त राष्ट्र निर्दिष्ट 1em, या 100%) हो। यदि आप एक कस्टम फ़ॉन्ट आकार सेट करते हैं, तो आप ऑटो-जूमिंग से बचने के font-sizeलिए अपने स्निपेट में सेट कर सकते हैं 16px।

— एलन एच।

मुझे पता है कि यह प्रश्न iPhone पर निर्देशित किया गया था, लेकिन यह प्लेटफार्मों भर में और अधिक प्लेटफार्मों / उपकरणों के भविष्य में संगत है, मैंने 16px दृष्टिकोण की कोशिश की, लेकिन एक एंड्रॉइड टैबलेट पर केवल ऑटो जूमिंग प्रभाव को कम किया। पोस्ट में निर्दिष्ट '1em' पर सेट करने से समस्या हल हो गई।

— toddles_fp

न तो 1emहै और न ही 1remएक उचित समाधान है क्योंकि दोनों की तुलना में कम हो सकता है 16pxऔर सफारी में कम से कम की आवश्यकता है 16pxज़ूम नहीं करने के लिए।

— चालाकी

मैं viewport समाधान का इस्तेमाल किया है, लेकिन यह काम नहीं किया, 16px समाधान ठीक काम करता है, लेकिन 16px मेरी साइट के inputbox के लिए बहुत बड़ा है, वहाँ कोई 3 समाधान है

— Suneth Kalhara

Answer 7

इस समस्या को ठीक करने का उचित तरीका मेटा व्यूपोर्ट को इसमें बदलना है:

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

Comments

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

— एलेक्रस्ट

IOS10 में स्पष्ट रूप से Apple ने अधिकतम पैमाने पर संपत्ति का सम्मान नहीं किया है, जिससे सभी साइटों को इसकी सेटिंग की परवाह किए बिना ज़ूम करने की अनुमति मिलती है।

— वोल्फ

यह iOS10 20 / सितंबर / 2016 संस्करण के लिए काम करता है ... कम से कम मेरे ऐप पर काम करता है ... धन्यवाद !!! इससे पहले कि मैं <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1, न्यूनतम-स्केल = 1 , अधिकतम-स्केल = 1" का उपयोग कर रहा था, लेकिन मैंने इसे प्रतिक्रिया पर लाइन पर स्विच कर दिया और यह काम किया ...

— eljamz

"सुनिश्चित करें कि ब्राउजर पिंच ज़ूम को पेज के व्यूपोर्ट मेटा एलिमेंट द्वारा ब्लॉक नहीं किया गया है ताकि इसका उपयोग पेज को 200% तक ज़ूम करने के लिए किया जा सके। इस मेटा एलिमेंट के यूजर-स्केलेबल और मैक्सिमम-स्केल विशेषताओं के लिए प्रतिबंधात्मक मूल्यों से बचा जाना चाहिए।" w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

— danielnixon

मैंने टिप्पणी देखी है कि इनमें से कुछ मेटा टैग iOS 10 पर कैसे काम नहीं करते हैं और मुझे पता है कि उपरोक्त iOS पर iOS के लिए कम से कम काम करता है। :) धन्यवाद!

— cbloss793

Answer 8

वहाँ कोई साफ रास्ता मुझे मिल सकता है, लेकिन यहाँ एक हैक है ...

1) मैंने देखा कि माउसओवर इवेंट ज़ूम से पहले होता है, लेकिन ज़ूम मूसडाउन या फ़ोकस इवेंट से पहले होता है।

2) आप जावास्क्रिप्ट का उपयोग करके मेटा व्यूपोर्ट टैग को गतिशील रूप से बदल सकते हैं ( जावास्क्रिप्ट के साथ iPhone सफारी पर ज़ूम को सक्षम / अक्षम करें देखें) ? )

तो, यह कोशिश करो (कॉम्पैक्टनेस के लिए jquery में दिखाया गया है):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

यह निश्चित रूप से एक हैक है ... ऐसी परिस्थितियां हो सकती हैं जहां माउसओवर / डाउन हमेशा प्रविष्टियों / निकास को पकड़ नहीं पाते हैं, लेकिन यह मेरे परीक्षणों में अच्छी तरह से काम करता है और एक ठोस शुरुआत है।

Comments

यकीन नहीं होता कि सफारी का व्यवहार कब बदल गया है, लेकिन अब (iOS6.0.1) ऑटोहाउस से पहले मूसडाउन हो रहा है। इस प्रकार मेरे पूर्व समाधान में, ज़ूमिंग को जल्द ही पुनः सक्षम किया जा रहा है। मैं एक पर्याप्त सुधार के साथ नहीं आया हूं, क्योंकि मैंने कोशिश की कि सभी घटनाएं अब ज़ूम से पहले हो। आप कीडाउन या ब्लर पर ज़ूम को फिर से सक्षम कर सकते हैं, लेकिन कुछ परिदृश्य हैं जो यह याद कर सकते हैं (जैसे कि उपयोगकर्ता कुछ भी लिखना शुरू करने से पहले मैन्युअल रूप से ज़ूम करना चाहते हैं)।

— dlo

Answer 9

मैंने हाल ही में (आज: डी) इस व्यवहार को एकीकृत किया था। कॉम्बो सहित मूल डिज़ाइन फ़ील्ड को प्रभावित न करने के लिए, मैंने फ़ील्ड के फ़ोकस में परिवर्तन लागू करने का विकल्प चुना:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

Comments

FYI करें, इसने iOS 6 के साथ मेरे iphone 5 पर अच्छा काम किया, लेकिन पोर्ट्रेट मोड में iOS 5 के साथ iPhone 4 पर, फोकस स्टाइल को ज़ूम होने के बाद लागू किया गया था। शायद कुछ सूक्ष्म चल रहा है, मैंने आगे की जांच नहीं की।

— विश

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

— माइक

: फोकस ने मेरे लिए iOS 10.2 iPhone 6 पर काम नहीं किया, लेकिन इनपुट [टाइप = "टेक्स्ट"]: हॉवर ने अच्छा काम किया।

— अमीरहोसिन आरजेड

Answer 10

निम्नलिखित के रूप में व्यूपोर्ट मेटा में उपयोगकर्ता-स्केलेबल = 0 जोड़ें

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

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

Comments

"सुनिश्चित करें कि ब्राउजर पिंच ज़ूम को पेज के व्यूपोर्ट मेटा एलिमेंट द्वारा ब्लॉक नहीं किया गया है ताकि इसका उपयोग पेज को 200% तक ज़ूम करने के लिए किया जा सके। इस मेटा एलिमेंट के यूजर-स्केलेबल और मैक्सिमम-स्केल विशेषताओं के लिए प्रतिबंधात्मक मूल्यों से बचा जाना चाहिए।" w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

— danielnixon

यह W3 द्वारा परिभाषित अभिगम्यता के नियमों को तोड़ता है।

— जोशुआ रसेल

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

— ब्लू बॉट

Answer 11

जैसा कि कई अन्य उत्तर पहले ही इंगित कर चुके हैं, इसे maximum-scaleमेटा viewportटैग में जोड़कर प्राप्त किया जा सकता है । हालांकि, इसका एंड्रॉइड डिवाइस पर उपयोगकर्ता ज़ूम को अक्षम करने का नकारात्मक परिणाम है । ( यह v10 के बाद से iOS उपकरणों पर उपयोगकर्ता ज़ूम को अक्षम नहीं करता है ।)

डिवाइस आईओएस होने पर हम डायनामिक रूप maximum-scaleसे मेटा में जोड़ने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं viewport। यह दोनों दुनिया के सर्वश्रेष्ठ को प्राप्त करता है: हम उपयोगकर्ता को ज़ूम करने और फ़ोकस पर पाठ क्षेत्र में ज़ूम करने से iOS को रोकने की अनुमति देते हैं।

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

कोड:

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// /programming/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

Comments

आप की एक प्रति क्यों बनाते हैं addMaximumScaleToMetaViewport? क्या यह केवल अर्थ संबंधी कारणों से है?

— फेरेमसन

हां, फ़ंक्शन को एक अलग नाम पर मैप करना ताकि यह स्पष्ट हो कि यह कैसे उपयोग किया जा रहा है।

— ओलिवर जोसेफ ऐश

Answer 12

जावास्क्रिप्ट हैक जो iOS 7 पर काम कर रहा है। यह @dlo के जवाब पर आधारित है, लेकिन माउसओवर और माउसआउट इवेंट्स को टचस्टार्ट और टचेंड इवेंट द्वारा बदल दिया जाता है। मूल रूप से यह स्क्रिप्ट ज़ूम करने से रोकने के लिए ज़ूम सक्षम करने से पहले आधा सेकंड का समय जोड़ेंगी।

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

Comments

इसने मेरे लिए सबसे अच्छा काम किया। लेकिन, मैंने ज़ूमस्टेबल और ज़ूमएनेबल दोनों के साथ टचस्टार्ट / टचेंड इवेंट को एक 'फोकस' इवेंट में बदल दिया।

— जस्टिन क्लाउड

देरी को जोड़ना iOS के नए संस्करणों पर बहुत अच्छा काम करता है, लेकिन यह दिलचस्प है कि 250ms पर सेट होने पर यह बहुत अच्छी तरह से काम नहीं करता है। यह संकेत देता है कि कुछ परिस्थितियों में, 500ms या तो काम नहीं कर सकते हैं, लेकिन अगर यह ज्यादातर समय काम करता है तो मुझे लगता है कि यह बिल्कुल भी काम नहीं करने से बेहतर है। अच्छी सोच।

— dlo

Answer 13

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

input, textarea {
    font-size: initial;
}

Comments

अच्छी तरह से सरल है, लेकिन क्या कोई तरीका है जो "प्रारंभिक" आकार को नियंत्रित करता है?

— 2540625

मैंने इसका परीक्षण नहीं किया है, लेकिन यह फ़ॉन्ट आकार को नियंत्रित करने का एक तरीका होना चाहिए। (कृपया मुझे बताएं कि क्या यह काम करता है और मैं अपना उत्तर अपडेट करूंगा) बॉडी {फ़ॉन्ट-आकार: 20 पीएक्स; } इनपुट {फ़ॉन्ट-आकार: विरासत; }

Answer 14

मैंने ऊपर क्रिस्टीना के समाधान का उपयोग किया, लेकिन बूटस्ट्रैप के लिए एक छोटे से संशोधन और डेस्कटॉप कंप्यूटर पर लागू करने के लिए एक और नियम के साथ। बूटस्ट्रैप का डिफ़ॉल्ट फ़ॉन्ट-आकार 14px है जो ज़ूम का कारण बनता है। निम्नलिखित इसे बूटस्ट्रैप में "प्रपत्र नियंत्रण" के लिए 16px में बदलता है, ज़ूम को रोकता है।

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

और गैर-मोबाइल ब्राउज़रों के लिए वापस 14px।

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

मैंने .form-control का उपयोग करने की कोशिश की: फ़ोकस, जिसने इसे 14px पर छोड़ दिया फ़ोकस को छोड़कर जिसने इसे बदलकर 16px कर दिया और इसने iOS8 के साथ ज़ूम समस्या को ठीक नहीं किया। कम से कम मेरे iPhone पर iOS8 का उपयोग करते हुए, फ़ॉन्ट-आकार को 16px होना चाहिए इससे पहले कि iPhone को पृष्ठ को ज़ूम न करने के लिए फोकस किया जाए।

Answer 15

मैंने ऐसा किया, jQuery के साथ भी:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

बेशक, इंटरफ़ेस में कुछ अन्य तत्वों को अनुकूलित करना पड़ सकता है यदि यह 16pxफ़ॉन्ट-आकार डिज़ाइन को तोड़ता है।

Comments

यह उत्तम दर्जे का है। यह स्टाइलिन है ’। मैं सजा से बाहर हूं। चतुर दृष्टिकोण।

— क्राउनजोन

@Wolfr क्या आपने वास्तविक डिवाइस पर कोशिश की?

— निकोलस होइजे

यह हमारे लिए iOS 12 पर काम करता है। मुझे यह पसंद है कि css ट्रांसफ़ॉर्म और नेगेटिव मार्जिन के साथ घूमना-फिरना सबसे अच्छा है।

— अनाम-एक

Answer 16

थोड़ी देर कोशिश करने के बाद मैं इस समाधान के साथ आया

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

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

पहले पोस्ट किए गए समाधानों के विपरीत, यह आपको इनपुट का फ़ॉन्ट-आकार सेट करने देगा जो आप चाहते हैं।

Comments

यह वास्तव में मेरे लिए काम करता है, खासकर जब से नए iOS संस्करणों में आप ज़ूमिंग को अक्षम करने के लिए व्यूपोर्ट मेटा टैग का उपयोग नहीं कर सकते हैं।

— मपरेज़ियो

IOS 12.1 पर काम करने की पुष्टि की, धन्यवाद

— Ziki

Answer 17

यहां लगभग हर एक पंक्ति को पढ़ने और विभिन्न समाधानों का परीक्षण करने के बाद, यह उन सभी के लिए धन्यवाद है जिन्होंने अपने समाधान साझा किए, जो कि आईफोन 7 आईओएस 10.x पर मेरे लिए आया, परीक्षण और काम कर रहा है:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

यह कुछ संकेत है, हालांकि, "हॉवर" एड और "फ़ोकस" एड राज्यों के बीच होने वाले त्वरित फ़ॉन्ट आकार परिवर्तन के परिणामस्वरूप एक "कूद" काफ़ी हद तक प्रदर्शित होता है - और प्रदर्शन पर redraw प्रभाव

Comments

आपकी प्रतिक्रिया के लिए धन्यवाद, @ माइकबटन। क्या आप कृपया अपना env (डिवाइस / iOS संस्करण) साझा कर सकते हैं?

— l3bel

Answer 18

@Jirikuchta के उत्तर से प्रेरित होकर, मैंने CSS के इस बिट को जोड़कर इस समस्या को हल किया:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

नहीं JS, और मैं किसी भी फ़्लैश या कुछ भी नोटिस नहीं है।

यह ध्यान देने योग्य है कि एक के viewportसाथ maximum-scale=1भी काम करता है, लेकिन तब नहीं जब पृष्ठ को एक iframe के रूप में लोड किया जाता है, या यदि आपके पास कुछ अन्य स्क्रिप्ट को संशोधित करना है viewport, आदि।

Answer 19

छद्म तत्व जैसे :focusकाम नहीं करते हैं जैसे वे करते थे। IOS 11 से, एक साधारण रीसेट घोषणा को आपकी मुख्य शैलियों से पहले जोड़ा जा सकता है (बशर्ते कि आप उन्हें छोटे फ़ॉन्ट आकार के साथ ओवरराइड न करें)।

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

यह ध्यान देने योग्य है कि Tachyons.css जैसे CSS पुस्तकालयों के लिए फिर गलती से आपके फ़ॉन्ट आकार को ओवरराइड करना आसान है।

उदाहरण के लिए वर्ग: f5के बराबर है fontSize: 1rem, जो कि ठीक है यदि आपने डिफ़ॉल्ट पर शरीर फ़ॉन्ट स्केल रखा है।

हालाँकि: यदि आप फ़ॉन्ट आकार वर्ग चुनते हैं: तो f6यह fontSize: .875remऊपर की ओर एक छोटे से डिस्प्ले के बराबर होगा । उस उदाहरण में आपको अपनी रीसेट घोषणाओं के बारे में अधिक विशिष्ट होना चाहिए:

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

Answer 20

वैसे, यदि आप बूटस्ट्रैप का उपयोग करते हैं, तो आप इस संस्करण का उपयोग कर सकते हैं:

.form-control {
  font-size: 16px;
}

Answer 21

मुझे डच यूनिवर्सिटी की वेबसाइट के लिए फॉर्म कंट्रोल इशू में ऑटो जूम को "ठीक" करना है (जो कि फॉर्म कंट्रोल में 15px इस्तेमाल किया गया है)। मैं आवश्यकताओं के निम्नलिखित सेट के साथ आया:

• उपयोगकर्ता को अभी भी ज़ूम इन करने में सक्षम होना चाहिए
• फ़ॉन्ट-आकार समान रहना चाहिए
• अस्थायी अलग स्टाइल की कोई झलक नहीं
• कोई jQuery की आवश्यकता
• नवीनतम iOS पर काम करना चाहिए और किसी अन्य OS / डिवाइस संयोजन में बाधा नहीं डालनी चाहिए
• यदि संभव हो तो कोई जादू टाइमआउट, और अगर सही ढंग से स्पष्ट टाइमर की जरूरत है

यह वही है जो मैं अब तक के साथ आया था:

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

कुछ नोट:

• ध्यान दें कि अब तक मैंने इसे केवल iOS 11.3.1 पर परीक्षण किया है, लेकिन जल्द ही कुछ अन्य संस्करणों पर इसका परीक्षण करेगा
• फोकस घटनाओं का उपयोग करने का मतलब है कि इसे कम से कम iOS 5.1 की आवश्यकता है (लेकिन मुझे लगता है कि हम उन साइटों को iOS संस्करणों में काम कर रहे हैं जो 9 साल की उम्र में एक शांत बोनस के रूप में काम कर रहे हैं)
• ईवेंट-डेलिगेशन का उपयोग करना क्योंकि बहुत सारी साइटें मैं उन पृष्ठों पर काम करती हूं जो गतिशील रूप से नियंत्रण बना सकते हैं
• EventListeners को html एलिमेंट (डॉक्यूमेंटमेंट) पर सेट करना ताकि बॉडी के उपलब्ध होने का इंतजार न करना पड़े (डॉक्यूमेंट तैयार / लोडेड स्थिति या DOMContentLoaded ईवेंट की प्रतीक्षा करने की आवश्यकता होने पर चेकिंग को परेशान न करें)

Answer 22

फ़ॉन्ट आकार को 16px पर सेट करने के बजाय, आप यह कर सकते हैं:

1. इनपुट फ़ील्ड को स्टाइल करें ताकि यह अपने इच्छित आकार से बड़ा हो, जिससे तार्किक फ़ॉन्ट का आकार 16px पर सेट हो सके।
2. इनपुट फ़ील्ड को सही आकार में सिकोड़ने के लिए scale()CSS ट्रांसफ़ॉर्म और निगेटिव मार्जिन का उपयोग करें ।

उदाहरण के लिए, मान लीजिए कि आपके इनपुट क्षेत्र को मूल रूप से स्टाइल किया गया है:

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

यदि आप 16/12 = 133.33% तक सभी आयामों को बढ़ाकर क्षेत्र का विस्तार करते हैं, तो 12/16 scale()= 75% का उपयोग करके कम करें , इनपुट फ़ील्ड में सही दृश्य आकार (और फ़ॉन्ट आकार) होगा, और कोई ज़ूम नहीं होगा ध्यान देते हैं।

जैसा कि scale()केवल दृश्य आकार को प्रभावित करता है, आपको क्षेत्र के तार्किक आकार को कम करने के लिए नकारात्मक मार्जिन को जोड़ने की भी आवश्यकता होगी।

इस सीएसएस के साथ:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

इनपुट फ़ील्ड का तार्किक फ़ॉन्ट आकार 16px होगा, जबकि इसमें 12px पाठ होगा।

मेरे पास एक ब्लॉग पोस्ट है जहां मैं थोड़ा और विस्तार में जाता हूं, और इसका उदाहरण देखने योग्य HTML है:
आईफोन पर सफारी में कोई इनपुट ज़ूम नहीं, पिक्सेल सही तरीके से

Answer 23

यहां तक ​​कि इन उत्तरों के साथ मुझे यह पता लगाने में तीन दिन लगे कि क्या चल रहा था और भविष्य में मुझे फिर से समाधान की आवश्यकता हो सकती है।

मेरी स्थिति वर्णित एक से थोड़ी अलग थी।

मेरा, मेरे पास पृष्ठ पर एक div में कुछ संतोषप्रद पाठ था। जब उपयोगकर्ता ने DIFFERENT div पर क्लिक किया, तो एक बटन, मैंने स्वचालित रूप से कुछ पाठ का चयन किया था contenteditable div (एक चयन सीमा जिसे पहले सहेजा गया था और साफ़ कर दिया गया था), उस चयन पर एक समृद्ध पाठ निष्पादित करता है, और इसे फिर से साफ़ कर दिया।

इसने मुझे उचित रूप से रंगों को उचित संदर्भ में देखने देने के लिए चयन को सामान्य रूप से छिपाए रखते हुए पृष्ठ पर कहीं और रंग विभक्तियों के साथ उपयोगकर्ता के इंटरैक्शन के आधार पर टेक्स्ट रंगों को अदृश्य रूप से बदलने में सक्षम बनाया।

ठीक है, iPad के Safari पर, कलर div पर क्लिक करने से ऑन-स्क्रीन कीबोर्ड ऊपर आ जाता है, और ऐसा कुछ भी नहीं जो मैं इसे रोकता।

मैं अंत में पता लगा कि कैसे iPad यह कर रहा है।

यह एक टचस्टार्ट और टचेंड अनुक्रम के लिए सुनता है जो संपादन योग्य पाठ के चयन को ट्रिगर करता है।

जब वह संयोजन होता है, तो यह ऑन-स्क्रीन कीबोर्ड दिखाता है।

दरअसल, यह एक डॉली ज़ूम करता है जहां यह संपादन योग्य पाठ को ज़ूम इन करते समय अंतर्निहित पृष्ठ को विस्तारित करता है। मुझे यह समझने में एक दिन लगा कि मैं क्या देख रहा हूं।

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

तो, इससे पहले कि सफारी मुझे "टचस्टार्ट", "मूसडाउन", "टचेंड", "माउसअप", "क्लिक", और मेरे कोड के कारण, एक पाठ चयन, उस क्रम में ट्रिगर कर रही थी।

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

मुझे इसका वर्णन करने का एक आसान तरीका नहीं पता है, लेकिन मुझे लगता है कि यह यहाँ होना ज़रूरी है क्योंकि मुझे यह मुद्दा सामने आने के एक घंटे के भीतर मिल गया।

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

Comments

सफारी क्या कर रही है, यह एक महान विवरण है। धन्यवाद!

— जेरेमी

Answer 24

मैं देख रहा हूं कि लोग जावास्क्रिप्ट या व्यूपोर्ट फ़ंक्शन के साथ कुछ अजीब चीजें करते हैं और सभी उपकरणों पर मैन्युअल रूप से ज़ूमिंग बंद करते हैं। मेरी राय में इसका समाधान नहीं होना चाहिए। इस सीएसएस स्निपेट को जोड़ने से iOS में ऑटो-जूम बंद हो जाएगा, बिना अपने फॉन्ट-साइज़ को एक निश्चित संख्या में बदलकर 16px की तरह।

डिफ़ॉल्ट रूप से, मैं इनपुट फ़ील्ड में 93.8% (15px) फ़ॉन्ट-आकार का उपयोग करता हूं और अपने सीएसएस स्निपेट को जोड़कर यह 93%% पर रहता है। 16px में बदलने या इसे एक निश्चित संख्या बनाने की आवश्यकता नहीं है।

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

Comments

यह मेरे लिए काम नहीं करता है, दोनों नवीनतम iOS 6 और iOS 9.2.1 के साथ परीक्षण किया गया। यहाँ एक न्यूनतम प्रजनन योग्य पृष्ठ है: pastebin.com/bh5Zhe9h यह अभी भी फ़ोकस पर केंद्रित है। अजीब बात है कि यह 2015 में पोस्ट किया गया था और अभी तक आईओएस 6 में काम नहीं करता है

— एलेक्जेंडर डाइलुओट

Answer 25

शरीर के फ़ॉन्ट-आकार के बराबर फ़ॉन्ट-आकार (इनपुट फ़ील्ड के लिए) सेट करना, ऐसा प्रतीत होता है कि ब्राउज़र को ज़ूम आउट करने से रोकता है या मैं font-size: 1remअधिक सुरुचिपूर्ण समाधान के रूप में उपयोग करने का सुझाव दूंगा।

Answer 26

जैसा कि iPhone पर अभी भी ऑटोमैटिक ज़ूम-इन (बिना ज़ूम-आउट) जारी है, यहाँ फोकस / ब्लर के साथ काम करने वाले dlo के सुझाव के आधार पर जावास्क्रिप्ट है।

जैसे ही पाठ इनपुट फ़्यूज़ किया जाता है और इनपुट छूट जाने पर पुन: अक्षम हो जाता है, तो ज़ूमिंग अक्षम हो जाती है।

नोट: कुछ उपयोगकर्ता छोटे पाठ इनपुट में ग्रंथों को संपादित नहीं कर सकते हैं! इसलिए, मैं व्यक्तिगत रूप से संपादन के दौरान इनपुट के पाठ का आकार बदलना पसंद करता हूं (नीचे कोड देखें)।

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

निम्नलिखित कोड में इनपुट का पाठ आकार 16 पिक्सेल में बदल जाएगा (गणना, यानी, वर्तमान ज़ूम आकार में) तत्व के दौरान ध्यान केंद्रित किया गया है। इसलिए iPhone स्वचालित रूप से ज़ूम-इन नहीं करेगा।

नोट: जूम फैक्टर की गणना विंडो.नरवीड और iPhone के 320 पिक्सल के डिस्प्ले के आधार पर की जाती है। यह केवल पोर्ट्रेट मोड में iPhone के लिए मान्य होगा ।

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Answer 27

मुझे इसे खोजने में थोड़ा समय लगा लेकिन यहाँ सबसे अच्छा कोड जो मुझे मिला ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

Answer 28

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

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });

Comments

यदि उपयोगकर्ता इनपुट नियंत्रण पर क्लिक करने से पहले ही थोड़ा सा ज़ूम कर चुका होता है, तो क्या यह समाधान व्यूपोर्ट को अचानक "अनज़ूम" कर देगा?

— ब्रूनो टोरक्वाटो

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

— पीट

Answer 29

फ़ॉन्ट-आकार को 16px पर सेट करने के बारे में शीर्ष उत्तर के लिए एक टिप्पणी में पूछा गया कि यह कैसे एक समाधान है, यदि आप बड़ा / छोटा फ़ॉन्ट चाहते हैं तो क्या होगा।

मैं आप सभी के बारे में नहीं जानता, लेकिन फ़ॉन्ट आकारों के लिए px का उपयोग करना सबसे अच्छा तरीका नहीं है, आपको उन्हें उपयोग करना चाहिए।

मैं इस मुद्दे पर अपनी प्रतिक्रियाशील साइट पर भाग गया जहाँ मेरा पाठ क्षेत्र 16 पिक्सेल से बड़ा है। मेरे पास मेरा फॉर्म कंटेनर 2rem में सेट था और मेरा इनपुट क्षेत्र 1.4em पर सेट था। अपने मोबाइल प्रश्नों में मैं व्यूपोर्ट के आधार पर html फॉन्ट-साइज़ को बदलता हूँ। चूंकि डिफ़ॉल्ट HTML 10 है, मेरा इनपुट क्षेत्र डेस्कटॉप पर 28px की गणना करता है

ऑटो-ज़ूम को हटाने के लिए मुझे अपना इनपुट 1.6em में बदलना होगा। इससे मेरे फ़ॉन्ट का आकार 32 गुना बढ़ गया। बस थोड़ा अधिक है और शायद ही ध्यान देने योग्य है। मेरे iPhone 4 और 5 पर मैं पोर्ट्रेट के लिए अपने html फॉन्ट-साइज़ को 15px और परिदृश्य के लिए 10px पर वापस बदलता हूँ। ऐसा प्रतीत होता है कि उस पिक्सेल आकार का मीठा स्थान 48px था, यही कारण है कि मैं 1.4em (42px) से बदलकर 1.6em (48px) हो गया।

आपको जो चीज़ करने की ज़रूरत है वह फ़ॉन्ट-आकार पर मीठे स्थान को ढूंढना है और फिर इसे अपने रेम / एमएम आकारों में पीछे की ओर बदलना है।

Answer 30

यहाँ एक हैक मैंने अपने एक प्रोजेक्ट पर इस्तेमाल किया है:

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

आरंभिक शैलियों और पैमाने पर मैं चाहता था लेकिन ध्यान केंद्रित करने पर कोई ज़ूम नहीं हुआ।