Google मानचित्र API में 'मेटा व्यूपोर्ट उपयोगकर्ता-स्केलेबल = नहीं' का क्या मतलब है


98

मैं गूगल मैप्स जावास्क्रिप्ट एपीआई V3 का उपयोग कर रहा हूं और आधिकारिक उदाहरण हमेशा आपके पास इस मेटा टैग को शामिल करते हैं:

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

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

तो, टैग का क्या मतलब है? क्या मुझे इसमें छोड़ देना चाहिए? क्या मुझे ब्राउज़र एजेंट का पता लगाने का प्रयास करना चाहिए और केवल डेस्कटॉप ब्राउज़र के लिए दिखाना चाहिए?

आप प्लगइन की जांच करना चाहते हैं, तो आप कर सकते हैं इसे डाउनलोड , स्रोत ब्राउज़ या एक जीवित उदाहरण देख


btw, Chrome कंसोल में लिखता है "कुंजी" उपयोगकर्ता-स्केलेबल "पहचाना और अनदेखा नहीं किया गया है।" यदि आप "हाँ" मान के साथ भी इसका उपयोग करते हैं - OOPS, तो मैंने देखा कि मेरे पास "स्केलेबल" में "ई" है, जैसे कि इसमें "तराजू (एक ड्रैगन) :-) हो सकता है
जॉर्ज बीरबिलिस

जवाबों:


110

कई उपकरणों (जैसे कि iPhone) पर, यह उपयोगकर्ता को ब्राउज़र के ज़ूम का उपयोग करने से रोकता है। यदि आपके पास एक मानचित्र है और ब्राउज़र ज़ूमिंग करता है, तो उपयोगकर्ता को बड़ी पिक्सेल युक्त लेबल के साथ एक बड़ी ol 'पिक्सेलयुक्त छवि दिखाई देगी। विचार यह है कि उपयोगकर्ता को Google मानचित्र द्वारा प्रदान की गई ज़ूमिंग का उपयोग करना चाहिए। अपने प्लगइन के साथ किसी भी बातचीत के बारे में निश्चित नहीं है, लेकिन यह वही है जो इसके लिए है।

हाल ही में, @ehfeng ने अपने उत्तर में नोट किया, क्रोम फॉर एंड्रॉइड (और शायद अन्य) ने इस तथ्य का लाभ उठाया है कि इस तरह के व्यूपोर्ट टैग के साथ पृष्ठों पर कोई मूल ब्राउज़र ज़ूम नहीं होता है। यह उन्हें स्पर्श घटनाओं पर भयानक 300ms की देरी से छुटकारा पाने की अनुमति देता है जो कि ब्राउज़र इंतजार करता है और देखता है कि क्या आपका एकल स्पर्श दोहरा स्पर्श होने पर समाप्त हो जाएगा। (सोचो "सिंगल क्लिक" और "डबल क्लिक"।) हालांकि, जब यह सवाल मूल रूप से पूछा गया था (2011 में), यह किसी भी मोबाइल ब्राउज़र में सच नहीं था। यह सिर्फ अजीब जोड़ा गया है कि सौभाग्य से हाल ही में पैदा हुआ।


मुझे लगता है कि यह केवल iPhone, ipad .. सफारी सामान में ज़ूम करने को अक्षम करता है। मेरा एंड्रॉइड बस इसे अनदेखा करता है (उपयोगकर्ता-स्केलेबल भाग, बाकी व्यूपोर्ट टैग का बिल्कुल नहीं)
जुआन

@ जुआन यह सिर्फ आईओएस / सफारी सामान से अधिक है। मैं शर्त लगाता हूं कि इसे Android के लिए Chrome में लागू किया गया है, उदाहरण के लिए। लेकिन हां, व्यूपोर्ट सामान कई एंड्रॉइड 2.X ब्राउज़रों में काम नहीं करता है।
ट्रॉट

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

उपयोगकर्ता-स्केलेबल = नहीं का एक और दिलचस्प दुष्प्रभाव यह है कि यह स्थिति के साथ समस्याओं को ठीक करता है: एंड्रॉइड 2.X ब्राउज़रों पर निश्चित मेनू (हालांकि आप -webkit-backface- दृश्यता का उपयोग कर सकते हैं: छिपा हुआ;)
क्रिश्चियन बट्सके

46

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

Google IO 2013 सत्र से https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

अपडेट: इसकी <meta name="viewport" content="width=device-width">सत्यता अब और नहीं है, यह 300ms विलंब को दूर करने के लिए पर्याप्त है


दूसरी ओर यह अक्षम उपयोगकर्ताओं के लिए पहुंच के लिए अच्छा नहीं है। मेरा मानना ​​है कि धारा ५० that के दिशानिर्देशों में कहा गया है कि एक उपयोगकर्ता को २००% तक ज़ूम करने में सक्षम होना चाहिए
ग्राहम फॉल्स

9

से v3 प्रलेखन (डेवलपर की मार्गदर्शिका> अवधारणाओं> मोबाइल उपकरणों के लिए विकास):

Android और iOS डिवाइस निम्नलिखित <meta>टैग का सम्मान करते हैं :

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

यह सेटिंग निर्दिष्ट करती है कि मानचित्र को पूर्ण-स्क्रीन प्रदर्शित किया जाना चाहिए और उपयोगकर्ता द्वारा पुन: प्रयोज्य नहीं होना चाहिए। ध्यान दें कि iPhone के सफ़ारी ब्राउज़र को इस <meta>टैग को पृष्ठ के <head>तत्व में शामिल करने की आवश्यकता है ।


3

आप व्यूपोर्ट उपयोग नहीं करना चाहिए सब पर अगर आपके डिजाइन उत्तरदायी नहीं है। इस टैग का दुरुपयोग करने से टूटे हुए लेआउट हो सकते हैं। आप इस लेख को प्रलेखन के बारे में पढ़ सकते हैं कि आपको इस टैग का उपयोग क्यों करना चाहिए जब तक आप यह नहीं जानते कि आप क्या कर रहे हैं। http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"उपयोगकर्ता-स्केलेबल = नहीं" भी आईओएस इनपुट बॉक्स पर ज़ूम-इन प्रभाव को रोकने में मदद करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.