मोबाइल वेब विकास के दौरान सफ़ारी ब्राउज़र में आने वाली क्रॉस ब्राउज़िंग समस्याओं के समाधान के लिए व्यूपोर्ट ऊँचाई गणना समस्या और वर्चुअल कीबोर्ड के कारण UI में विस्थापन की समस्या के समाधान प्रस्तुत किए गए हैं।
व्यूपोर्ट ऊँचाई की समस्या को dvh या svh के उपयोग से, वर्चुअल कीबोर्ड की समस्या को min-height के उपयोग से, विक्रेता उपसर्गों के अनुप्रयोग से और जावास्क्रिप्ट का उपयोग करके गतिशील नियंत्रण जैसे तरीकों से हल किया जा सकता है।
सफ़ारी मोबाइल वेब विकास के दौरान विक्रेता उपसर्गों के उपयोग और LocalStorage, SessionStorage की क्षमता सीमा (लगभग 5MB) और टैब के बीच संग्रहण साझाकरण की असंभवता आदि पर विचार करना चाहिए।
मैंने पूरी मेहनत से लेख लिखा और सेव बटन दबाया, लेकिन 404 एरर आ गया और मेरा लेख गायब हो गया ㅠㅠ
मोबाइल वेब डेवलपमेंट के दौरान सामने आए दो चुनौतीपूर्ण क्रॉस ब्राउज़िंग मुद्दे और अन्य विचारणीय मुद्दों पर
मैं रिकॉर्ड करना चाहता हूँ।
ब्राउज़र के एड्रेस बार और नेविगेशन बार के कारण व्यूपोर्ट की ऊँचाई की गणना में समस्या
सफ़ारी और सैमसंग इंटरनेट में ब्राउज़र में नीचे की तरफ़ नेविगेशन बार होता है। अगर खास तौर पर show/hide सेट नहीं किया गया है, तो स्क्रॉल डाउन करने पर यह दिखाई देता है और ऊपर करने पर छिप जाता है।
समस्या यह है कि इनकी वजह से व्यूपोर्ट स्थिर नहीं रहता और बदलता रहता है।
उदाहरण के लिए, अगर ऊँचाई 100vh है, तो नेविगेशन बार के बिना लेआउट सही ढंग से दिखाई देता है, लेकिन जब नेविगेशन बार दिखाई देता है, तो यह UI को ढँक लेता है।
इस समस्या को हल करने के लिए
1. dvh का उपयोग करें।
dvh एक डायनामिक व्यूपोर्ट है, जो व्यूपोर्ट की ऊँचाई बदलने पर स्वचालित रूप से परिवर्तन को दर्शाता है। इसलिए, एड्रेस बार या बॉटम नेविगेशन की उपस्थिति के अनुसार UI लेआउट में बदलाव का समाधान संभव है।
2. svh पर भी विचार किया जा सकता है।
svh एड्रेस बार या नेविगेशन को छोड़कर केवल UI क्षेत्र की ऊँचाई है। एड्रेस बार या नेविगेशन के दिखाई देने की उम्मीद होने पर svh का उपयोग करना सही होगा।
इनपुट चुनने पर वर्चुअल कीबोर्ड के कारण UI का खिसकना
मोबाइल सफ़ारी में इनपुट चुनने पर वर्चुअल कीबोर्ड के कारण मौजूदा UI तत्व खिसक गए। अन्य ब्राउज़रों में, वर्चुअल कीबोर्ड आमतौर पर निरपेक्ष रूप से दिखाई देता है, लेकिन सफ़ारी मोबाइल वेब में, यह display block की तरह व्यवहार करता है और जगह घेरता है।
सफ़ारी में, जब वर्चुअल कीबोर्ड आता है, तो यह व्यूपोर्ट की ऊँचाई को गतिशील रूप से समायोजित करता है, जिससे vh यूनिट का उपयोग करने वाले तत्वों को फिर से समायोजित किया जाता है और समस्या उत्पन्न होती है। इसे हल करने के लिए,
1. min-height का उपयोग करें।
ऊँचाई को स्थिर करके UI के खिसकने से रोका जा सकता है।
2. वेंडर प्रीफिक्स लागू करें। (बाद में बताया गया है)
html, body{height: -webkit-fill-available;/* सफ़ारी के लिए */}
सफ़ारी जैसे कुछ ब्राउज़रों में लागू होने वाले गुण जोड़े गए हैं।
3. जावास्क्रिप्ट का उपयोग करके व्यूपोर्ट को गतिशील रूप से नियंत्रित करें।
window.addEventListener('resize',()=>{if(window.innerHeight<500){// जब कीबोर्ड दिखाई दे तो चलाने योग्य कोडdocument.body.classList.add('keyboard-visible');}else{// जब कीबोर्ड छिप जाए तो चलाने योग्य कोडdocument.body.classList.remove('keyboard-visible');}});
रिसाइज़ इवेंट से व्यूपोर्ट में बदलाव का पता लगाया जाता है और उचित स्टाइल लागू किया जाता है।
3-1. focusin इवेंट के दौरान स्थिति को नियंत्रित करें।
3-2. वर्चुअल कीबोर्ड दिखाई देने पर स्थिति को नियंत्रित करें। (नीचे दिए गए उदाहरण में क्लास लागू किया गया है)
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// वर्चुअल कीबोर्ड दिखाई देने की स्थितिdocument.body.classList.add('keyboard-visible');}else{// वर्चुअल कीबोर्ड छिपने की स्थितिdocument.body.classList.remove('keyboard-visible');}});
मैंने 3-1 का उपयोग करके समस्या को हल किया। अगर 3-1 इच्छानुसार काम नहीं करता है, तो पहले नीचे दिए गए कोड का उपयोग करके जाँच करें कि क्या यह सही ढंग से काम कर रहा है।
सफ़ारी में मोबाइल वेब डेवलपमेंट करते समय कुछ अन्य बातों पर भी विचार किया जाना चाहिए।
1. कुछ गुणों का उपयोग करते समय वेंडर प्रीफिक्स का उपयोग करें।
* वेंडर प्रीफिक्स एक उपसर्ग है जो ब्राउज़र को किसी विशिष्ट CSS गुण को समझने और उसे रेंडर करने में मदद करता है, जिससे विभिन्न ब्राउज़रों में अलग-अलग तरह से लागू किए गए CSS को इच्छानुसार लागू किया जा सके। इससे विभिन्न ब्राउज़रों में एकरूपता और पुराने ब्राउज़रों के साथ संगतता सुनिश्चित होती है।
प्रकार
-webkit-: क्रोम, सफ़ारी आदि -moz-: मोज़िला फ़ायरफ़ॉक्स -ms-: इंटरनेट एक्सप्लोरर और एज -o-: ओपेरा
वेंडर प्रीफिक्स की आवश्यकता वाले प्रमुख गुण इस प्रकार हैं।
इसके अलावा, सफ़ारी LocalStorage और SessionStorage की क्षमता को लगभग 5MB तक सीमित करता है, और प्रत्येक टैब के बीच Storage स्थान साझा नहीं किया जाता है, इसलिए सावधानी बरतने की ज़रूरत है।
अतिरिक्त: मेरा पहले लिखा लेख गायब हो गया, इसलिए मैं बहुत दुखी हूँ। हालाँकि, मेरे द्वारा पोस्ट किया गया लेख उच्च गुणवत्ता वाला नहीं है,,,ㅠ मुझे हमेशा अस्थायी रूप से सहेजना होगा।