सिक्योर-टू-फिट व्यूपोर्ट मेटा विशेषता क्या करती है?

Question

मुझे इसके लिए दस्तावेज ढूंढने में परेशानी हो रही है। क्या यह सफारी विशिष्ट है?

आईओएस 9 ( यहां ) में हाल ही में एक बग था , जिसका समाधान shrink-to-fit=noव्यूपोर्ट मेटा में जोड़ रहा है।

यह कोड क्या करता है?

Answer 1

यह सफारी विशिष्ट है, कम से कम लेखन के समय, सफारी 9.0 में पेश किया जा रहा है। "सफारी में नया क्या है?" सफारी 9.0 के लिए प्रलेखन :

व्यूपोर्ट परिवर्तन

व्यूपोर्ट मेटा टैग का उपयोग करके "width=device-width"पृष्ठ को व्यूपोर्ट सीमा से अधिक होने वाली सामग्री को फिट करने के लिए स्केल किया जाता है। आप "shrink-to-fit=no"नीचे दिखाए गए अनुसार अपने मेटा टैग में जोड़कर इस व्यवहार को ओवरराइड कर सकते हैं । जोड़ा गया मान व्यूपोर्ट को स्केल करने से पृष्ठ को रोक देगा।

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

संक्षेप में, इसे व्यूपोर्ट मेटा टैग में जोड़कर प्री-सफारी 9.0 व्यवहार को पुनर्स्थापित करता है।

उदाहरण

यहाँ एक दृश्य दृश्य उदाहरण है जो दो विन्यासों में पृष्ठ को लोड करने पर अंतर दिखाता है।

लाल अनुभाग व्यूपोर्ट की चौड़ाई है और नीला अनुभाग प्रारंभिक व्यूपोर्ट (जैसे left: 100vw) के बाहर स्थित है । ध्यान दें कि shrink-to-fit=noलोप होने पर फिट होने के लिए पहले उदाहरण में पेज को कैसे ज़ूम किया जाता है (इस प्रकार आउट-ऑफ-व्यूपोर्ट कंटेंट दिखा रहा है) और नीली सामग्री बाद के उदाहरण में स्क्रीन से दूर रहती है।

इस उदाहरण का कोड https://codepen.io/davidjb/pen/ENGqpv पर पाया जा सकता है ।

बिना सिकुड़े-से फिट निर्दिष्ट

सिकुड़न-से-फिट = नहीं

Comments

मुझे क्षमा करें, लेकिन मुझे अभी भी समझ नहीं आया कि वह कोड क्या करता है। क्या आप अलग तरीके से समझा सकते हैं? धन्यवाद!

— डैनियल स्प्रिंगर

@ दानी डिफ़ॉल्ट रूप से, सफारी किसी भी सामग्री को फिट करने के लिए एक पृष्ठ को ज़ूम आउट करेगा जो व्यूपोर्ट को ओवरफ्लो करता है (पहला उदाहरण दिखाई देने वाले नीले क्षेत्र को दिखाता है; यह अतिप्रवाह है)। निर्दिष्ट करना shrink-to-fit=noइस व्यवहार को रोकता है, ज़ूम स्तर को अकेला छोड़कर ओवरफ्लो करने वाली सामग्री को ऑफ-स्क्रीन छोड़ देता है। अपने iDevice (या iOS सिम्युलेटर) पर कोडपेन उदाहरण आज़माएं और सेटिंग बदलने का प्रयास करें। संभवतया परिवर्तन को देखने से मदद मिलेगी।

— davidjb

ओह समझा। लेकिन कोई अपनी सामग्री का हिस्सा छोटे पर्दे पर क्यों छिपाना चाहेगा?

— डैनियल स्प्रिंगर

@ दानी विभिन्न कारण, लेकिन त्वरित उदाहरण स्लाइडर्स / हिंडोला हैं जो व्यूपोर्ट के बाहर सामग्री रखते हैं, या अन्यथा बड़ी गैर-उत्तरदायी सामग्री (जैसे छवियां / तालिकाओं) जो अन्यथा अतिप्रवाह करेंगे और बाकी पेज को डिफ़ॉल्ट के साथ छोटा होने का कारण बनेंगे। shrink-to-fitव्यवहार। इसके साथ shrink-to-fit=no, पृष्ठ अपेक्षित आकार में बना रहता है, जिससे सामग्री व्यूपोर्ट को ओवरफ्लो कर सकती है। एक उपयोगकर्ता ओवरफ़्लो सामग्री को देखने के लिए (आमतौर पर) अभी भी स्क्रॉल या ज़ूम आउट कर सकता है लेकिन प्रारंभिक व्यूपोर्ट डिवाइस के आकार से मेल खाता है।

— davidjb

@davidjb मुझे लगता है कि यह नवीनतम iOS 11 के साथ तय किया गया है। मैं इस बग को पुन: पेश करने में सक्षम नहीं हूं।

— जिल शाह

Answer 2

IOS उपयोग के आँकड़े के रूप में, यह दर्शाता है कि iOS 9.0-9.2.x उपयोग वर्तमान में 0.17% है। यदि ये संख्याएं वास्तव में इन संस्करणों के वैश्विक उपयोग का संकेत हैं, तो यह आपके व्यूपोर्ट मेटा टैग से हटने-फिट होने के लिए सुरक्षित होने की अधिक संभावना है।

9.2.x के बाद। IOS अपने 'ब्राउज़र' पर इस टैग की जाँच को हटा देता है।

आप इस पृष्ठ को https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html देख सकते हैं