मेरा क्रॉस ब्राउज़िंग समस्या का अनुभव (मुख्य रूप से सफारी)

मोबाइल वेब विकसित करते समय आने वाली दो चुनौतीपूर्ण क्रॉस ब्राउज़िंग समस्याएँ और अन्य विचारणीय मुद्दों पर

रिकॉर्ड करना चाहता हूँ।

ब्राउज़र के एड्रेस बार और नेविगेशन बार के कारण व्यूपोर्ट की ऊँचाई की गणना में समस्या

सफ़ारी और सैमसंग इंटरनेट में ब्राउज़र का अपना निचला नेविगेशन बार होता है। विशेष रूप से show/hide सेटिंग के मामले में, स्क्रॉल डाउन करने पर यह दिखाई देता है और ऊपर ले जाने पर गायब हो जाता है।

समस्या यह है कि इनके कारण व्यूपोर्ट स्थिर नहीं रहता और बदलता रहता है।

उदाहरण के लिए, यदि ऊँचाई 100vh है, तो नेविगेशन बार के बिना लेआउट सही ढंग से प्रदर्शित होता है, लेकिन जब नेविगेशन बार दिखाई देता है, तो यह UI को ओवरलैप कर देता है।

इस समस्या को हल करने के लिए

1. dvh का उपयोग करें।

dvh एक गतिशील व्यूपोर्ट है जो व्यूपोर्ट की ऊँचाई में परिवर्तन को स्वचालित रूप से प्रतिबिंबित करता है। इसलिए, यह एड्रेस बार या निचले नेविगेशन की उपस्थिति के आधार पर UI लेआउट में परिवर्तन का प्रबंधन कर सकता है।

2. svh पर भी विचार किया जा सकता है।

svh एड्रेस बार या नेविगेशन को छोड़कर केवल UI क्षेत्र की ऊँचाई है। एड्रेस बार या नेविगेशन के दिखाई देने की उम्मीद होने पर svh का उपयोग करना अधिक सटीक होता है।

इनपुट का चयन (फ़ोकस) करने पर वर्चुअल कीबोर्ड के कारण UI का खिसकना

मोबाइल सफ़ारी में इनपुट का चयन करने पर वर्चुअल कीबोर्ड के कारण मौजूदा UI तत्व खिसक गए। अन्य ब्राउज़रों में, वर्चुअल कीबोर्ड आमतौर पर निरपेक्ष रूप से दिखाई देता है, लेकिन सफ़ारी मोबाइल वेब में, यह ऐसा लगता है जैसे display block लागू किया गया है और जगह घेरता है।

सफ़ारी में, जब वर्चुअल कीबोर्ड दिखाई देता है, तो यह व्यूपोर्ट की ऊँचाई को गतिशील रूप से समायोजित करता है, जिससे vh इकाइयों का उपयोग करने वाले तत्व फिर से समायोजित हो जाते हैं और समस्या उत्पन्न होती है। इसे हल करने के लिए,

1. min-height का उपयोग करें।

ऊँचाई को स्थिर करके UI को खिसकने से रोकें।

2. वेंडर प्रीफ़िक्स लागू करें (बाद में चर्चा की जाएगी)

सफ़ारी जैसे विशिष्ट ब्राउज़रों में लागू होने वाले गुण जोड़ें।

3. जावास्क्रिप्ट का उपयोग करके व्यूपोर्ट को गतिशील रूप से नियंत्रित करें।

* इस विधि की अनुशंसा नहीं की जाती है। स्क्रॉल की ऊँचाई अचानक बदल जाती है जिससे लेआउट झिलमिलाता है।

resize इवेंट लगाकर व्यूपोर्ट में परिवर्तन का पता लगाएँ और उपयुक्त शैली लागू करें।

3-1. focusin इवेंट के होने पर स्थिति को नियंत्रित करें।

3-2. वर्चुअल कीबोर्ड के दिखाई देने पर स्थिति को नियंत्रित करें (नीचे दिए गए उदाहरण में क्लास लागू किया गया है)

केवल CSS का उपयोग करके समस्या को हल करना सबसे अच्छा है, लेकिन अगर उपरोक्त तरीकों से समस्या हल नहीं होती है, तो जांचें कि क्या यह position: absolute या fixed वाला तत्व है, और top, right, left, bottom गुणों को हटाकर CSS को ठीक करें।

अन्य

इसके अलावा, मैंने सफ़ारी में मोबाइल वेब विकसित करते समय विचार करने योग्य कुछ और बातें खोजी हैं।

1. कुछ गुणों का उपयोग करते समय वेंडर प्रीफ़िक्स का उपयोग करें।

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

प्रकार

-webkit-: क्रोम, सफ़ारी आदि
-moz-: मोज़िला फ़ायरफ़ॉक्स
-ms-: इंटरनेट एक्सप्लोरर और एज
-o-: ओपेरा

वेंडर प्रीफ़िक्स की आवश्यकता वाले विशिष्ट गुण इस प्रकार हैं।

इसके अलावा, सफ़ारी LocalStorage और SessionStorage की क्षमता को लगभग 5MB तक सीमित करता है, और प्रत्येक टैब के बीच Storage स्थान साझा नहीं किया जाता है, इसलिए सावधानी बरतने की आवश्यकता है।