HTML में व्यूपोर्ट क्या है?

TL;DR

संक्षेप में: HTML में व्यूपोर्ट किसी वेब पेज का वह हिस्सा है जो यूज़र की स्क्रीन पर दिखता है। इसका आकार डिवाइस के हिसाब से बदलता है — डेस्कटॉप मॉनिटर की तुलना में किसी फ़ोन का व्यूपोर्ट छोटा होता है। डेवलपर इसे HTML डॉक्यूमेंट के <head> में मौजूद <meta name=”viewport”> टैग से कंट्रोल करते हैं।

व्यूपोर्ट क्या है?

हर डिवाइस पर काम करने वाली वेबसाइटें बनाने के लिए व्यूपोर्ट एक अहम अवधारणा है। ज़रूरी व्यूपोर्ट टैग के बिना आपके वेब पेज अलग-अलग डिवाइस पर ठीक से नहीं दिख सकते। ProxyWing में हम ध्यान रखते हैं कि आपका वेब कंटेंट हर स्क्रीन साइज़ पर अच्छा दिखे।

यह वेब पेज का वह हिस्सा है जो उनकी स्क्रीन पर दिखता है। यह ब्राउज़र, डिवाइस और डिस्प्ले के हिसाब से बदलता है। डेवलपर HTML व्यूपोर्ट के ज़रिए लेआउट, कंटेंट और एलिमेंट कंट्रोल कर सकते हैं। वेब डिज़ाइनर व्यूपोर्ट की चौड़ाई और व्यूपोर्ट की ऊंचाई को कंट्रोल करके यह ध्यान रखते हैं कि साइट सबसे छोटी स्क्रीन और बड़े डेस्कटॉप, दोनों पर बढ़िया दिखे।

वेब डिज़ाइन और SEO के लिए व्यूपोर्ट क्यों मायने रखता है

व्यूपोर्ट वेब डिज़ाइन के लिए बहुत अहम है, क्योंकि यह साइज़ तय करने और यूनिट मापने के तरीके पर असर डालता है। व्यूपोर्ट को सही तरीके से सेट करने पर दिखने वाले हिस्से पेजिंग की ज़रूरतों के अनुसार रहते हैं। सही व्यूपोर्ट छोटे डिवाइस और अलग-अलग डिवाइस पर वेब कंटेंट को ठीक से लोड होने में मदद करता है, जो SEO के लिए अच्छा है। रिस्पॉन्सिव वेब पेज सर्च इंजन को आसानी से मिल जाते हैं, क्योंकि उनकी रैंकिंग ऊंची होती है।

<meta viewport> टैग की व्याख्या

आप <meta viewport> टैग का उपयोग करके यह तय कर सकते हैं कि आपका वेब पेज अलग-अलग डिवाइस पर कैसे फ़िट होता है। यह विज़ुअल व्यूपोर्ट, व्यूपोर्ट की चौड़ाई और व्यूपोर्ट यूनिट में मदद करता है। सही व्यूपोर्ट मेटा सेटिंग के साथ आपकी साइट स्क्रीन साइज़ के हिसाब से आसानी से ढल जाती है। इससे बड़े डिस्प्ले और छोटे डिवाइस, दोनों पर साइट का उपयोग बेहतर हो जाता है।

यहां वह स्टैंडर्ड व्यूपोर्ट मेटा टैग है जिसे ज़्यादातर आधुनिक वेब पेज इस्तेमाल करते हैं:

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

यह लाइन HTML डॉक्यूमेंट के <head> सेक्शन के अंदर जाती है। width=device-width हिस्सा ब्राउज़र को बताता है कि पेज की चौड़ाई डिवाइस की स्क्रीन के बराबर रखे। initial-scale=1.0 हिस्सा पेज के पहली बार लोड होने पर ज़ूम लेवल 100% पर सेट करता है। इस टैग के बिना मोबाइल ब्राउज़र पेज को डिफ़ॉल्ट डेस्कटॉप चौड़ाई (आम तौर पर 980 पिक्सेल) पर रेंडर करते हैं और फिर नतीजे को स्क्रीन में फ़िट करने के लिए सिकोड़ देते हैं। टेक्स्ट पढ़ने के लिए बहुत छोटा हो जाता है, और यूज़र को ज़ूम करना और हॉरिज़ॉन्टल स्क्रॉल करना पड़ता है।

व्यूपोर्ट टैग के आम एट्रिब्यूट

मेटा व्यूपोर्ट टैग का content एट्रिब्यूट कई प्रॉपर्टी स्वीकार करता है। इनमें से हर एक इस बात का अलग पहलू कंट्रोल करती है कि पेज किसी डिवाइस पर कैसे दिखाया जाता है।

width — व्यूपोर्ट की चौड़ाई सेट करता है। सबसे आम वैल्यू device-width है, जो डिवाइस की स्क्रीन की चौड़ाई से मेल खाती है। width=600 जैसा कोई तय नंबर भी मान्य है, लेकिन इसका इस्तेमाल कम ही होता है।

initial-scale — पेज के पहली बार लोड होने पर ज़ूम लेवल सेट करता है। स्टैंडर्ड वैल्यू 1.0 है, जिसका मतलब है कोई ज़ूम नहीं। कम वैल्यू पेज को सिकोड़ देती हैं; ज़्यादा वैल्यू ज़ूम इन कर देती हैं।

minimum-scale और maximum-scale — तय करते हैं कि यूज़र कितना ज़ूम आउट और ज़ूम इन कर सकते हैं। वैल्यू आम तौर पर 0.1 से 10.0 के बीच होती हैं। इन्हें बहुत ज़्यादा सीमित करना एक्सेसिबिलिटी को नुकसान पहुंचाता है।

user-scalable — यह कंट्रोल करता है कि यूज़र पिंच-टू-ज़ूम कर सकता है या नहीं। इसे no पर सेट करने से ज़ूम ब्लॉक हो जाता है, और आम तौर पर ऐसा करने की सलाह नहीं दी जाती, क्योंकि इससे कम दृष्टि वाले यूज़र के लिए पेज पढ़ना मुश्किल हो जाता है।

एक आम रिस्पॉन्सिव सेटअप में सिर्फ़ width=device-width और initial-scale=1.0 का इस्तेमाल होता है, और ज़ूम डिफ़ॉल्ट रूप से चालू रहता है।

मोबाइल डिवाइस के लिए HTML में व्यूपोर्ट

व्यूपोर्ट टैग सबसे ज़्यादा मोबाइल पर मायने रखता है। स्मार्टफ़ोन की स्क्रीन 320 से 430 पिक्सेल चौड़ी होती है, जबकि कई वेबसाइटें 1280 पिक्सेल और उससे ज़्यादा की डेस्कटॉप चौड़ाई के लिए डिज़ाइन की जाती हैं। व्यूपोर्ट मेटा टैग के बिना मोबाइल ब्राउज़र पूरे डेस्कटॉप लेआउट को स्क्रीन में फ़िट करने के लिए सिकोड़ देता है, और नतीजा पढ़ने लायक नहीं रहता।

width=device-width सेट करने से यह एक ही लाइन में हल हो जाता है। ब्राउज़र फ़ोन की असल चौड़ाई का उपयोग करता है, और इसके बाद पेज का CSS मीडिया क्वेरी, फ़्लूइड ग्रिड या vw और vh जैसी आधुनिक व्यूपोर्ट यूनिट के ज़रिए उस पर प्रतिक्रिया दे सकता है।

Google मोबाइल-फ़र्स्ट इंडेक्सिंग का उपयोग करता है, यानी सर्च रिज़ल्ट में पेज की रैंकिंग तय करने के लिए उसके मोबाइल वर्शन को ही देखा जाता है। व्यूपोर्ट टैग का न होना या टूटा होना उन सबसे आम कारणों में से एक है जिनकी वजह से कोई पेज Google की मोबाइल यूज़ेबिलिटी जांच में फ़ेल हो जाता है।

व्यूपोर्ट यूनिट: vw, vh, vmin, vmax

आधुनिक CSS में चार ऐसी यूनिट शामिल हैं जिनका आकार व्यूपोर्ट के सापेक्ष तय होता है। ये उस समय काम आती हैं जब किसी एलिमेंट को तय पिक्सेल साइज़ पर बने रहने के बजाय स्क्रीन के साथ स्केल होना चाहिए।

• vw (व्यूपोर्ट विड्थ): 1vw का मतलब व्यूपोर्ट की चौड़ाई का 1% होता है। font-size: 5vw वाली कोई हेडिंग चौड़ी स्क्रीन पर बड़ी और संकरी स्क्रीन पर छोटी हो जाती है।
• vh (व्यूपोर्ट हाइट): 1vh का मतलब व्यूपोर्ट की ऊंचाई का 1% होता है। height: 100vh वाला कोई हीरो सेक्शन, डिवाइस चाहे कोई भी हो, पूरे दिखने वाले हिस्से को भर देता है।
• vmin: चौड़ाई और ऊंचाई में से छोटे माप का 1%।
• vmax: चौड़ाई और ऊंचाई में से बड़े माप का 1%।

ये यूनिट इस पर निर्भर करती हैं कि व्यूपोर्ट मेटा टैग सही तरीके से सेट हो। जिस पेज पर width=device-width न हो, उस पर CSS को बताया जाने वाला व्यूपोर्ट डिफ़ॉल्ट डेस्कटॉप चौड़ाई के बराबर होता है, और यूनिट अब उससे मेल नहीं खातीं जो यूज़र को असल में दिखता है।

अक्सर पूछे जाने वाले सवाल

HTML में व्यूपोर्ट का क्या मतलब है?

HTML में व्यूपोर्ट वेब पेज का वह हिस्सा है जो इस समय यूज़र की ब्राउज़र विंडो में दिख रहा होता है। यह पूरे पेज के बराबर नहीं होता — पेज व्यूपोर्ट से आगे तक फैल सकता है, और बाकी हिस्सा देखने के लिए यूज़र स्क्रॉल करते हैं।

मेटा व्यूपोर्ट टैग किस काम आता है?

मेटा व्यूपोर्ट टैग ब्राउज़र को बताता है कि मौजूदा डिवाइस पर पेज का साइज़ और स्केल कैसे सेट करना है। फ़ोन और टैबलेट पर रिस्पॉन्सिव लेआउट के ठीक से काम करने के लिए यह ज़रूरी है।

डिफ़ॉल्ट व्यूपोर्ट साइज़ क्या होता है?

व्यूपोर्ट मेटा टैग के बिना ज़्यादातर मोबाइल ब्राउज़र डिफ़ॉल्ट रूप से लगभग 980 पिक्सेल की व्यूपोर्ट चौड़ाई लेते हैं, और फिर नतीजे को स्क्रीन के हिसाब से छोटा कर देते हैं। इसी वजह से बिना इस टैग वाले पेज फ़ोन पर ज़ूम आउट किए हुए दिखते हैं।

क्या व्यूपोर्ट मेटा टैग ज़रूरी है?

HTML स्पेसिफ़िकेशन इसे ज़रूरी नहीं बताता, लेकिन व्यवहार में यह हर ऐसी साइट के लिए ज़रूरी है जिसे मोबाइल डिवाइस पर काम करना चाहिए। जिन पेज पर यह नहीं होता, उन्हें Google गैर-मोबाइल-फ़्रेंडली के तौर पर फ़्लैग करता है।

व्यूपोर्ट चौड़ाई और स्क्रीन चौड़ाई में क्या अंतर है?

स्क्रीन चौड़ाई डिवाइस की फ़िज़िकल पिक्सेल चौड़ाई होती है। व्यूपोर्ट चौड़ाई वह चौड़ाई है जो ब्राउज़र CSS को बताता है, और width=device-width के साथ दोनों वैल्यू आपस में मेल खाती हैं।