100vh लेआउट में iOS एड्रेस बार को संबोधित करते हुए

यह एक बग नहीं है, यह एक सुविधा है।

जैसा कि मैंने अपनी पहली PSD रूपांतरण को अपनी सुंदर 100vh और 100vw हीरो छवि के साथ तैनात किया था, मुझे यह पता चलता है कि मेरे iPhone 6s iOS 10 सफारी से देखे जाने पर मेरे लेआउट के निचले हिस्से को छिपाया गया था। क्यों? मुझे लगा कि मैंने सब कुछ सही किया है! क्या मैंने गलती से कहीं मार्जिन या पैडिंग जोड़ दी थी? मैं क्या देख रहा था?

करीब से निरीक्षण करने पर, मुझे जल्दी से एहसास हुआ कि हालांकि मेरी हीरो की छवि वास्तव में 100vh थी, यह आंशिक रूप से सफारी के पते और टूल बार द्वारा कवर की गई थी, जिससे घबराए हुए "विगले-स्क्रॉल" का निर्माण हुआ। यह ठीक है, मैंने सोचा। Google और स्टैक ओवरफ़्लो पर कोई त्वरित खोज ठीक नहीं हो सकती है। हालाँकि, मुझे पता चला कि समाधान इतना सीधा नहीं है।

कुछ शोध करने के बाद, मुझे एहसास हुआ कि यह एक सामान्य शिकायत थी, जिसे "iOS व्यूपोर्ट स्क्रॉल बग" के रूप में संदर्भित किया गया था। 2015 के फरवरी में, निकोलस होज़ी ने वेबकिट बुगज़िला पर बग की सूचना दी, जब उसने खोज की कि उसके 100vh मोबाइल गेम के ब्राउज़र बटन बार द्वारा काट दिए गए हैं। Apple के एक इंजीनियर बेंजामिन पौलेन ने होज़ी को जवाब दिया। उन्होंने कहा - सही प्रोग्रामर फैशन में - कि यह एक बग नहीं था, यह एक विशेषता है।

यह पूरी तरह से जानबूझकर है। इस प्रभाव को हासिल करने के लिए हमारी ओर से काफी काम किया गया। :)

आधार समस्या यह है: जैसे ही आप स्क्रॉल करते हैं, दृश्यमान क्षेत्र बदल जाता है। अगर हम तदनुसार सीएसएस व्यूपोर्ट ऊंचाई को अपडेट करते हैं, तो हमें स्क्रॉल के दौरान लेआउट को अपडेट करना होगा। न केवल बकवास जैसा दिखता है, बल्कि 60 एफपीएस पर ऐसा करना व्यावहारिक रूप से अधिकांश पृष्ठों में असंभव है (60 एफपीएस आईओएस पर आधारभूत फ्रैमरेट है)।

यह आपको "बकवास जैसा दिखता है" भाग दिखाना मुश्किल है, लेकिन कल्पना करें जैसे ही आप स्क्रॉल करते हैं, सामग्री चलती है और स्क्रीन पर आप जो चाहते हैं वह लगातार स्थानांतरित हो रहा है।

गतिशील रूप से ऊंचाई को अपडेट करने से काम नहीं हो रहा था, हमारे पास कुछ विकल्प थे: iOS पर व्यूपोर्ट इकाइयों को ड्रॉप करें, आईओएस 8 से पहले दस्तावेज़ के आकार से मेल खाएं, छोटे दृश्य आकार का उपयोग करें, बड़े दृश्य आकार का उपयोग करें।

हमारे पास जो डेटा था, बड़े आकार के आकार का उपयोग करना सबसे अच्छा समझौता था। व्यूपोर्ट इकाइयों का उपयोग करने वाली अधिकांश वेबसाइट अधिकांश समय बहुत अच्छी लग रही थीं।

मैं एक के लिए, एप्पल में एक इंजीनियर नहीं हूं, इसलिए मुझे विश्वास है कि जब वह कहता है कि इसके पीछे अच्छे कारण हैं कि उन्होंने यह व्यवहार क्यों बनाया है। इस प्रकार, बग को "RESOLVED WONTFIX" के रूप में चिह्नित किया गया था, और मुझे एहसास हुआ कि अगर मुझे कभी भी मेरी सुंदर, 100vh हीरो की छवि चाहिए, तो मुझे और गहरा करना होगा।

समाधान 1: सीएसएस मीडिया क्वेरी

यह तरीका, यद्यपि पूरी तरह से सुरुचिपूर्ण नहीं है, सरल और लागू करने में आसान है। बस विशिष्ट डिवाइस-चौड़ाई और ऊंचाइयों के साथ सभी iOS उपकरणों को लक्षित करें। यहाँ एक कोड है, pburtchaell के सौजन्य से, जहां ".foo" आपके पूर्ण-ऊंचाई तत्व पर एक वर्ग होगा।

@मीडिया सभी और (डिवाइस-चौड़ाई: 768px) और (डिवाइस-ऊंचाई: 1024px) और (ओरिएंटेशन: पोर्ट्रेट) {
    .foo {
        ऊंचाई: 1024px;
    }
}
                                            
परिदृश्य उन्मुखीकरण के साथ / * iPad। * /
@मीडिया सभी और (डिवाइस-चौड़ाई: 768px) और (डिवाइस-ऊंचाई: 1024px) और (ओरिएंटेशन: लैंडस्केप) {{
    .foo {
        ऊंचाई: 768px;
    }
}
                                               
/* आई फोन 5
आप पहलू अनुपात वाले उपकरणों को भी लक्षित कर सकते हैं। * / @मीडिया स्क्रीन और (डिवाइस-पहलू-अनुपात: 40/71) {
    .foo {
        ऊंचाई: 500 पीएक्स;
    }
}

उपरोक्त कोड को देखते हुए, यह प्रतीत होता है कि एक मामूली सामग्री ओवरलैप अपरिहार्य है। हालाँकि, स्थिति और आकार वाले तत्व जो व्यूपोर्ट इकाइयों पर निर्भर हैं, स्थिर रहेंगे। यह एक जीत है! एक साधारण कैल्क (100vh - heightOfBar) की तरह कुछ जोड़ने से पता बार के लिए क्षतिपूर्ति होगी। लेकिन समर्थन करने के लिए बहुत सारे उपकरणों और ब्राउज़रों के साथ, यह एक स्थायी समाधान की तरह नहीं है।

समाधान 2: जावास्क्रिप्ट के साथ इनरहाइट को लक्षित करना।

आंतरिक माप व्यूपोर्ट की ऊंचाई / चौड़ाई को संदर्भित करता है, गणना ऊर्ध्वाधर / क्षैतिज स्क्रॉल सलाखों में ले जाता है। अब हम बात करेंगे! यहाँ एक आरेख है जो इस पर जोर देता है।

इस ज्ञान का उपयोग करते हुए, आप इस तरह की एक सरल स्क्रिप्ट का उपयोग कर सकते हैं, पेज-लोड पर ऊँचाई सेट करने के लिए और इसे स्थिर रखने के लिए, स्टैक ओवरफ्लो उपयोगकर्ता tobiq से:

window.onresize = function () {
    document.body.height = window.innerHeight;
}
window.onresize (); // शुरू में ऊंचाई निर्धारित करने के लिए कहा जाता है।

समाधान 3: Div100vh रिएक्ट घटक

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

npm स्थापित - save अभिक्रिया-div-100vh

फिर घटक को आयात करें और अपने तत्वों को इसमें लपेटें, जैसे:

Div100vh को 'react-div-100vh' से आयात करें;
const MyFullscreenComponent = () => (
    
       आपका सामान यहां जाता है
    
)

और वहाँ तुम जाओ!

इन विभिन्न समाधानों के परीक्षण के बाद, मुझे एहसास हुआ कि इस मुद्दे के लिए एक आकार-फिट-सभी समाधान नहीं है। तो, कृपया अपने क्रॉस-ब्राउज़र, क्रॉस-डिवाइस परीक्षण के साथ मेहनती बनें। और हो सकता है कि पूरी तरह से मोबाइल के लिए vh / vw इकाइयों का उपयोग करने से बचें क्योंकि इन इकाइयों के साथ बर्गी व्यवहार मोबाइल ब्राउज़रों में अच्छी तरह से प्रलेखित है।

मुझे बताएं कि क्या ये समाधान आपके लिए उपयोगी थे, और किन लोगों ने सबसे अच्छा काम किया!