HTML में उत्तरदायी वेब डिज़ाइन के लिए व्यूपोर्ट मेटा टैग का उपयोग कैसे करें?

Html Mem Uttaradayi Veba Diza Ina Ke Li E Vyuporta Meta Taiga Ka Upayoga Kaise Karem



उत्तरदायी वेब डिज़ाइन वेबसाइटों को डिज़ाइन करने की तकनीक है जो उपयोगकर्ताओं को एक सहज प्रभाव प्रदान करने के लिए विभिन्न स्क्रीन आकारों और उपकरणों के अनुसार बदलती है। ऐसी कई विधियाँ हैं जिनके द्वारा डेवलपर अपनी वेबसाइट को उत्तरदायी बना सकता है। इन तरीकों में से एक 'का उपयोग है' व्यूपोर्ट ' मेटा टैग। इस टैग में विशेषताएँ हैं जैसे ' चौड़ाई ”, “ ऊंचाई ”, “ प्रारंभिक-पैमाना ”, आदि। ये विशेषताएँ वेब डिज़ाइन को उत्तरदायी बनाने में कुछ खास तरीकों से मदद करती हैं।

यह ब्लॉग समझाएगा कि HTML में उत्तरदायी वेब डिज़ाइन के लिए व्यूपोर्ट मेटा टैग का उपयोग कैसे करें:

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

' व्यूपोर्ट विभिन्न स्क्रीन आकारों पर सामग्री कैसे प्रदर्शित होती है, इसे नियंत्रित करके उत्तरदायी डिज़ाइन बनाने के लिए सबसे महत्वपूर्ण टैग है। यह टैग ' के अंदर रखा गया है <सिर> ”अनुभाग और इसमें दो विशेषताएँ हैं। पहला है ' नाम “विशेषता जो इस टैग का उद्देश्य बताती है और दूसरी है” संतुष्ट 'जो' में प्रदान किए गए मान से संबंधित डेटा रखता है नाम ' गुण।







व्यूपोर्ट मेटा टैग की विभिन्न विशेषताएं

व्यूपोर्ट मेटा टैग में निम्नलिखित विशेषताएँ होती हैं जिन्हें 'के मान के रूप में रखा जा सकता है' संतुष्ट ' गुण:



'चौड़ाई' विशेषता

' चौड़ाई ” विशेषता लंबवत रूप से सामग्री के लिए वेबपृष्ठ के दृश्य क्षेत्र को निर्दिष्ट करती है। इसका मेटा टैग इस तरह दिखता है:



< मेटा नाम = 'व्यूपोर्ट' संतुष्ट = 'चौड़ाई = उपकरण-चौड़ाई' >

'ऊंचाई' विशेषता

' ऊंचाई ” विशेषता यह सुनिश्चित करने के लिए वेबपेज की लंबवत लंबाई निर्धारित करती है कि व्यूपोर्ट की ऊंचाई स्क्रीन की ऊंचाई से मेल खाती है। इसका मेटा टैग इस तरह दिखता है:





< मेटा नाम = 'व्यूपोर्ट' संतुष्ट = 'ऊंचाई = 400' >

'प्रारंभिक पैमाने' विशेषता

' प्रारंभिक-पैमाना ” विशेषता यह सुनिश्चित करती है कि पहली बार लोड होने पर वेबपेज उचित ज़ूम स्तर पर प्रदर्शित हो। उदाहरण के लिए, नीचे दिए गए कोड पर जाएँ:

< मेटा नाम = 'व्यूपोर्ट' संतुष्ट = 'चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0' >

'अधिकतम पैमाने' विशेषता

' अधिकतम पैमाने ” विशेषता लेआउट समस्याओं को रोकने के लिए वेबपेज के लिए अधिकतम ज़ूम स्तर निर्दिष्ट करती है:



< मेटा नाम = 'व्यूपोर्ट' संतुष्ट = 'चौड़ाई = उपकरण-चौड़ाई, अधिकतम-पैमाना = 1.0' >

'न्यूनतम-स्केल' विशेषता

' न्यूनतम पैमाने न्यूनतम ज़ूम-आउट स्केल स्तर निर्दिष्ट करके उपयोगकर्ता को बहुत अधिक ज़ूम आउट करने से रोकने के लिए उपयोग किया जाता है:

< मेटा नाम = 'व्यूपोर्ट' संतुष्ट = 'चौड़ाई = उपकरण-चौड़ाई, न्यूनतम-पैमाना = 0.5' >

'उपयोगकर्ता-स्केलेबल' विशेषता

' उपयोगकर्ता-मापनीय ” विशेषता उपयोगकर्ता को वेबपृष्ठ स्क्रीन को ज़ूम आउट करने या मूल्य को ' पर सेट करके ज़ूम इन करने की अनुमति नहीं देती है या नहीं देती है' नहीं ' या ' हाँ ”। मेटा टैग जो उपयोगकर्ता को ज़ूम इन या आउट करने की अनुमति देता है:

< मेटा नाम = 'व्यूपोर्ट' संतुष्ट = 'चौड़ाई = डिवाइस-चौड़ाई, उपयोगकर्ता-स्केलेबल = हाँ' >

HTML में उत्तरदायी वेब डिज़ाइन के लिए व्यूपोर्ट मेटा टैग का उपयोग कैसे करें?

उत्तरदायी वेब डिज़ाइन के लिए व्यूपोर्ट मेटा टैग के उपयोग को बेहतर ढंग से समझने के लिए। आइए एक उदाहरण के माध्यम से चलते हैं:

मान लीजिए अंदर ' <दिव> 'टैग कई हैं'

'' का उपयोग करके वेबपेज पर डाले गए टैग और चित्र ' उपनाम:

< डिव >

< पी >

< बी > Linuxhint द्वारा संचालित, व्यूपोर्ट मेटा टैग को बेहतर ढंग से समझने के लिए वेबपेज को विभिन्न स्क्रीन पर खोलें आकार उपकरण।< / बी >

< / पी >

< आईएमजी स्रोत = '../bg.jpg' सब कुछ = 'हैकर' चौड़ाई = '460' ऊंचाई = '3. 4. 5' >

< पी शैली = 'पैडिंग: 5 पीएक्स' >

< मैं > Linuxhint टीम में शामिल हों< / मैं >

Linuxhint द्वारा संचालित, व्यूपोर्ट मेटा टैग को बेहतर ढंग से समझने के लिए वेबपेज को विभिन्न स्क्रीन पर खोलें आकार डिवाइस। Linuxhint द्वारा संचालित, व्यूपोर्ट मेटा टैग को बेहतर ढंग से समझने के लिए अलग-अलग स्क्रीन पर वेबपेज खोलें आकार डिवाइस। Linuxhint द्वारा संचालित, व्यूपोर्ट मेटा टैग को बेहतर ढंग से समझने के लिए अलग-अलग स्क्रीन पर वेबपेज खोलें आकार डिवाइस। Linuxhint द्वारा संचालित, व्यूपोर्ट मेटा टैग को बेहतर ढंग से समझने के लिए अलग-अलग स्क्रीन पर वेबपेज खोलें आकार उपकरण।

< / पी >

< / डिव >

उपरोक्त कोड स्निपेट के संकलन के बाद, वेबपेज इस तरह दिखता है:

आउटपुट प्रदर्शित करता है कि सामग्री उत्तरदायी नहीं है क्योंकि यह छोटे उपकरणों पर पूरी तरह से प्रदर्शित नहीं हो रही है।

अब इसे उत्तरदायी बनाने के लिए 'जोड़ें' व्यूपोर्ट ' मेटा टैग:

< सिर >

< मेटा नाम = 'व्यूपोर्ट' संतुष्ट = 'चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0' / >

< / सिर >

कोड को अपडेट करने के बाद, वेबपेज अलग-अलग स्क्रीन साइज पर इस तरह दिखता है:

अंतिम आउटपुट दिखाता है कि 'के अंदर मेटा टैग जोड़ने के बाद वेबपेज अब उत्तरदायी है' <सिर> ' उपनाम।

निष्कर्ष

व्यूपोर्ट मेटा टैग डेवलपर को ब्राउज़र को निर्देशों का एक सेट प्रदान करने की अनुमति देता है जो सेट करता है कि विभिन्न स्क्रीन आकार के उपकरणों पर वेबपेज कैसे प्रदर्शित होता है। मेटा टैग “के अंदर रखा गया है <सिर> ” टैग किया गया है और इसमें ऐसी विशेषताएँ हैं जो उत्तरदायी वेबसाइट डिज़ाइन बनाने में मदद करती हैं। इस ब्लॉग ने प्रदर्शित किया है कि HTML में उत्तरदायी वेब डिज़ाइन के लिए व्यूपोर्ट मेटा टैग का उपयोग कैसे करें।