उत्तरदायी वेब डिज़ाइन - व्यूपोर्ट
व्यूपोर्ट क्या है?
व्यूपोर्ट एक वेब पेज का उपयोगकर्ता का दृश्य क्षेत्र है।
व्यूपोर्ट डिवाइस के साथ बदलता रहता है, और कंप्यूटर स्क्रीन की तुलना में मोबाइल फोन पर छोटा होगा।
टैबलेट और मोबाइल फोन से पहले, वेब पेज केवल कंप्यूटर स्क्रीन के लिए डिज़ाइन किए गए थे, और वेब पेजों के लिए एक स्थिर डिज़ाइन और एक निश्चित आकार होना आम बात थी।
फिर, जब हमने टैबलेट और मोबाइल फोन का उपयोग करके इंटरनेट पर सर्फिंग शुरू की, तो निश्चित आकार के वेब पेज व्यूपोर्ट में फिट होने के लिए बहुत बड़े थे। इसे ठीक करने के लिए, उन उपकरणों के ब्राउज़र ने स्क्रीन को फिट करने के लिए पूरे वेब पेज को छोटा कर दिया।
यह सही नहीं था !! लेकिन एक त्वरित फिक्स।
व्यूपोर्ट सेट करना
<meta>HTML5 ने टैग के माध्यम से वेब डिजाइनरों को व्यूपोर्ट पर नियंत्रण करने की एक विधि पेश की
।
<meta>आपको अपने सभी वेब पेजों में निम्नलिखित व्यूपोर्ट तत्व शामिल करना चाहिए :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
यह ब्राउज़र को पेज के आयामों और स्केलिंग को नियंत्रित करने के निर्देश देता है।
डिवाइस की width=device-widthस्क्रीन-चौड़ाई का पालन करने के लिए भाग पृष्ठ की चौड़ाई निर्धारित करता है (जो डिवाइस के आधार पर अलग-अलग होगा)।
initial-scale=1.0जब पृष्ठ पहली बार ब्राउज़र द्वारा लोड किया जाता है तो यह भाग प्रारंभिक ज़ूम स्तर सेट करता है।
यहां व्यूपोर्ट मेटा टैग के बिना वेब पेज और व्यूपोर्ट मेटा टैग वाले उसी वेब पेज का एक उदाहरण दिया गया है :
युक्ति: यदि आप इस पृष्ठ को फ़ोन या टैबलेट से ब्राउज़ कर रहे हैं, तो आप अंतर देखने के लिए ऊपर दिए गए दो लिंक पर क्लिक कर सकते हैं।
व्यूपोर्ट के लिए आकार सामग्री
उपयोगकर्ताओं का उपयोग वेबसाइटों को डेस्कटॉप और मोबाइल दोनों उपकरणों पर लंबवत स्क्रॉल करने के लिए किया जाता है - लेकिन क्षैतिज रूप से नहीं!
इसलिए, यदि उपयोगकर्ता को पूरे वेब पेज को देखने के लिए क्षैतिज रूप से स्क्रॉल करने या ज़ूम आउट करने के लिए मजबूर किया जाता है, तो इसका परिणाम खराब उपयोगकर्ता अनुभव होता है।
पालन करने के लिए कुछ अतिरिक्त नियम:
1. बड़े निश्चित चौड़ाई वाले तत्वों का उपयोग न करें - उदाहरण के लिए, यदि कोई छवि व्यूपोर्ट से अधिक चौड़ी चौड़ाई पर प्रदर्शित होती है तो यह व्यूपोर्ट को क्षैतिज रूप से स्क्रॉल करने का कारण बन सकती है। व्यूपोर्ट की चौड़ाई में फ़िट होने के लिए इस सामग्री को समायोजित करना याद रखें।
2. सामग्री को अच्छी तरह से प्रस्तुत करने के लिए किसी विशेष व्यूपोर्ट चौड़ाई पर निर्भर न होने दें - चूंकि सीएसएस पिक्सल में स्क्रीन आयाम और चौड़ाई उपकरणों के बीच व्यापक रूप से भिन्न होती है, इसलिए सामग्री को अच्छी तरह से प्रस्तुत करने के लिए किसी विशेष व्यूपोर्ट चौड़ाई पर भरोसा नहीं करना चाहिए।
3. छोटी और बड़ी स्क्रीन के लिए अलग-अलग स्टाइल लागू करने के लिए CSS मीडिया क्वेरी का उपयोग करें - पृष्ठ तत्वों के लिए बड़ी पूर्ण CSS चौड़ाई सेट करने से तत्व छोटे डिवाइस पर व्यूपोर्ट के लिए बहुत चौड़ा हो जाएगा। इसके बजाय, सापेक्ष चौड़ाई मानों का उपयोग करने पर विचार करें, जैसे कि चौड़ाई: 100%। साथ ही, बड़े एब्सोल्यूट पोजिशनिंग मानों का उपयोग करने से सावधान रहें। यह तत्व छोटे उपकरणों पर व्यूपोर्ट के बाहर गिरने का कारण बन सकता है।