रिस्पोंसिव वेबसाइट डिजाइन - विज़वास

क्या विन्यास है?

विन्यास (viewport) वेबसाइट पर उपयोगकर्ता के दृश्यमान क्षेत्र है。

विन्यास डिवाइस के अनुसार भिन्न होता है, मोबाइल फोन पर यह कंप्यूटर स्क्रीन की तुलना में छोटा होता है。

पैड और मोबाइल डिवाइस से पहले, वेबसाइटें केवल कंप्यूटर स्क्रीन के लिए डिजाइन की जाती थीं और वेबसाइट के स्थिर डिजाइन और निर्धारित आकार बहुत आम थे。

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

यह सबसे अच्छा नहीं है! यह केवल एक जल्दी सुधार है。

सेट कर सकते हैं

HTML5 ने एक तरीका शुरू किया है, जिससे Web डिजाइनर विन्यास को <meta> टैग विन्यास को नियंत्रित करने के लिए शामिल करनी चाहिए。

आपको सभी वेबसाइटों में नीचे की <meta> विन्यास तत्व:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

यह ब्राउज़र को पृष्ठ के आकार और स्केलिंग अनुपालन के बारे में जानकारी प्रदान करता है。

width=device-width भागीदारी पृष्ठ की चौड़ाई को डिवाइस के स्क्रीन के चौड़ाई के अनुसार निर्धारित करती है (डिवाइस अनुसार)

जब ब्राउज़र पहली बार पृष्ठ को लोड करता है तबinitial-scale=1.0 भागीदारी विन्यास स्केलिंग स्तर को निर्धारित करते हैं。

नीचे दिए गए उदाहरण विन्यास के मेटा टैग के बिना वेबसाइट और विन्यास के मेटा टैग के साथ वेबसाइट के उदाहरण हैं:

सूचना:अगर आप मोबाइल या टैबलेट पर इस पृष्ठ को देख रहे हैं, तो नीचे दिए दोनों लिंक पर क्लिक करके अलग-अलग अंतर देख सकते हैं。



विन्यास के मेटा टैग के बिना


विन्यास के मेटा टैग सहित

सामग्री को विन्यास करें ताकि यह विन्यास के आकार के अनुसार हो

उपयोगकर्ता टैबलेट और मोबाइल डिवाइसों पर वेबसाइट को ऊपर-नीचे स्क्रॉल करना पसंद करते हैं, न कि खासी करना!

तथापि, यदि उपयोगकर्ता को पूरे वेबसाइट को देखने के लिए होगा स्तरांक या छोटा करना पड़ता है, तो इससे उपयोगकर्ता का अनुभव खराब होगा。

कुछ अतिरिक्त नियमों को अनुसरण करना आवश्यक है:

1. बड़ी फ़िक्स्ड विस्तृतता वाले एलीमेंट का उपयोग करने से बचिए - उदाहरण के लिए, यदि इमेज की विस्तृतता विज़वास की विस्तृतता से अधिक है, तो विज़वास के होरिज़न्टल स्क्रॉल हो सकता है।यह सामग्री को विज़वास की विस्तृतता के अनुसार समायोजित करना अनिवार्य है。

2. सामग्री को विशेष विज़वास विज़वास विस्तृतता पर निर्भर नहीं करना चाहिए - क्योंकि डिवाइसों के बीच CSS पिक्सल आकार और विस्तृतता के बहुत अलग होती है, इसलिए सामग्री को विशेष विज़वास विस्तृतता पर निर्भर नहीं करना चाहिए।

3. स्माल स्क्रीन और बड़े स्क्रीन के लिए विभिन्न स्टाइलों के लिए CSS मीडिया क्वेरी का उपयोग करें - पृष्ठ एलीमेंट के लिए बड़ी CSS अब्जक्ट विस्तृतता देना से इस एलीमेंट को छोटी डिवाइस के विज़वास में बहुत विस्तृत हो सकता है।इसके बजाय, सापेक्षिक विस्तृतता का उपयोग करना चाहिए, जैसे width: 100%।इसके अलावा, बड़ी अब्जक्ट लोकेशन का उपयोग करने से बचिए, जो छोटी डिवाइस के विज़वास से एलीमेंट को बाहर खींच सकता है。