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