Using meta name="viewport"
Contents
व्यूपोर्ट क्या है?
meta name="viewport" का उपयोग क्यों करना चाहिए?
व्यूपोर्ट सेट करना
meta name="viewport" ब्लॉक थीम में कैसे जोड़ें?
Responsive Web Design क्यों?
व्यूपोर्ट क्या है?
व्यूपोर्ट किसी वेब पेज का उपयोग करने वालो का दृश्य क्षेत्र है। जैसे कि कंप्यूटर मोबाइल लैपटॉप।व्यूपोर्ट डिवाइस के साथ बदलता रहता है, और कंप्यूटर स्क्रीन की तुलना में मोबाइल फोन पर छोटा हो जाता है।
meta name="viewport का उपयोग क्यों करना चाहिए?
meta name="viewport"इसका उपयोग ब्राउज़र की सामग्री को एक समान रूप में सेट करना होता है।आप जानते ही हैं कि कंप्यूटर लैपटॉप और मोबाइल डिवाइस की स्क्रीन का आकार अलग-अलग होता है इस सेटिंग को करने से यह हमारे वेब पेज को हरेक स्क्रीन के लिए अनुकूलित करता है जिसकी वजह से कंप्यूटर लैपटॉप और मोबाइल में वही पेज अच्छी तरह से दिखा सकेंगे।
व्यूपोर्ट सेट करना
HTML5 ने वेब डिजाइनरों को <meta>टैग के माध्यम से व्यूपोर्ट पर नियंत्रण करने के लीऐ एक तरीका बताया है।
आपको <meta> को अपने सभी वेब पेजों में निम्नलिखित व्यूपोर्ट तत्व के साथ शामिल करना चाहिए।
<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>
<meta>व्यूपोर्ट पेज के आयाम और स्केलिंग(zoom) को नियंत्रित करने के लिए ब्राउज़र को निर्देश देता है।
width=device-widthभाग पेज की चौड़ाई को सेट करके डिवाइस की स्क्रीन-चौड़ाई के हीसाब से सेटिंग करता है।
initial-scale=1.0जब पेज ब्राउज़र द्वारा पहली बार लोड किया जाता है तो यह हिस्सा प्रारंभिक ज़ूम स्तर सेट करता है।
meta name="viewport" ब्लॉक थीम में कैसे जोड़ें?
नीचे दिए गए कोड को कॉपी करले
अपने ब्लॉग में थीम में ऐडीट HTML चुने उसके बाद हेड
<head>खोजे उसके नीचे यह कोड पेस्ट कीजिए।
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>
के नीचे यह कोड पेस्ट कीजिए।
अगर आपकी टेंप्लेट/थीम में पहले से ही <head>के नीचे इस तरीके से कुछ लिखा हुआ है।
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
इस तरह बदले<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>
तो इसमें आपकोmaximum-scale=1' को बदलकर
maximum-scale=5' करना होगा।
इनशॉट maximum-scale=5 से अधिक होना चाहिए फिर चाहे 6-7-8 -9 यह हमारी जूम सिस्टम को ऑन करता है। इससे व्यूअर हमारे पेज को जूम करके देख सकते हैं।
इस तरीके से कोई एरर नहीं दिखेगा
<meta name="viewport" content="width=device-width, initial-scale=1.0">
इस कोड को पेस्ट करने से हम अपने व्यूअर को जूम करने की किसी भी सीमा से नहीं बांधते अगर आप
maximum-scale=5' सिलेक्ट करते हैं तो आप व्यूअर को 5 तक जूम करने की अनुमति देते हैं वह इससे ज्यादा अतिरिक्त जूम नहीं कर सकता। अगर आप ऊपरवाला कोड इस्तेमाल करते हैं तो व्यूअर आपके पेज को डिवाइस के हिसाब से अतिरिक्त ज्यादा जूम कर पाएगा।
Responsive Web Design क्यों?
रेस्पॉन्सिव वेब डिजाइन की हमें जरूरत क्यों है? अगर आप यह सोचते हो तो मैं आपको बताना चाहता हूं कि आजकल हर कोई मोबाइल कंप्यूटर और लैपटॉप से वेबसाइट व्यू कर रहा है।और अगर हम अपनी वेबसाइट की डिजाइन को रेस्पॉन्सिव वेब डिजाइन नहीं बनाएंगे तो हमें ज्यादा व्यू नहीं मिलेंगे।हमारी वेबसाइट मोबाइल में कंप्यूटर में और लैपटॉप में भी सही तरीके से दिखनी चाहिए।आमतौर पर वेबसाइट की डिजाइन कंप्यूटर के स्क्रीन के हिसाब से बनाई जाती है।इसीलिए हमें रेस्पॉन्सिव वेब डिजाइन बनानी होगी जो कि लैपटॉप कंप्यूटर और मोबाइल में सही तरीके से चले।
Using meta name="viewport"
Contents
व्यूपोर्ट क्या है?
meta name="viewport" का उपयोग क्यों करना चाहिए?
व्यूपोर्ट सेट करना
meta name="viewport" ब्लॉक थीम में कैसे जोड़ें?
Responsive Web Design क्यों?
व्यूपोर्ट क्या है?
व्यूपोर्ट किसी वेब पेज का उपयोग करने वालो का दृश्य क्षेत्र है। जैसे कि कंप्यूटर मोबाइल लैपटॉप।व्यूपोर्ट डिवाइस के साथ बदलता रहता है, और कंप्यूटर स्क्रीन की तुलना में मोबाइल फोन पर छोटा हो जाता है।
meta name="viewport का उपयोग क्यों करना चाहिए?
meta name="viewport"इसका उपयोग ब्राउज़र की सामग्री को एक समान रूप में सेट करना होता है।आप जानते ही हैं कि कंप्यूटर लैपटॉप और मोबाइल डिवाइस की स्क्रीन का आकार अलग-अलग होता है इस सेटिंग को करने से यह हमारे वेब पेज को हरेक स्क्रीन के लिए अनुकूलित करता है जिसकी वजह से कंप्यूटर लैपटॉप और मोबाइल में वही पेज अच्छी तरह से दिखा सकेंगे।व्यूपोर्ट सेट करना
HTML5 ने वेब डिजाइनरों को <meta>टैग के माध्यम से व्यूपोर्ट पर नियंत्रण करने के लीऐ एक तरीका बताया है।आपको <meta> को अपने सभी वेब पेजों में निम्नलिखित व्यूपोर्ट तत्व के साथ शामिल करना चाहिए।
<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>
<meta>व्यूपोर्ट पेज के आयाम और स्केलिंग(zoom) को नियंत्रित करने के लिए ब्राउज़र को निर्देश देता है।
width=device-widthभाग पेज की चौड़ाई को सेट करके डिवाइस की स्क्रीन-चौड़ाई के हीसाब से सेटिंग करता है।
initial-scale=1.0जब पेज ब्राउज़र द्वारा पहली बार लोड किया जाता है तो यह हिस्सा प्रारंभिक ज़ूम स्तर सेट करता है।
meta name="viewport" ब्लॉक थीम में कैसे जोड़ें?
नीचे दिए गए कोड को कॉपी करलेअपने ब्लॉग में थीम में ऐडीट HTML चुने उसके बाद हेड
<head>खोजे उसके नीचे यह कोड पेस्ट कीजिए।
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>
के नीचे यह कोड पेस्ट कीजिए।
अगर आपकी टेंप्लेट/थीम में पहले से ही <head>के नीचे इस तरीके से कुछ लिखा हुआ है।
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
इस तरह बदले
तो इसमें आपकोmaximum-scale=1' को बदलकर
maximum-scale=5' करना होगा।
इनशॉट maximum-scale=5 से अधिक होना चाहिए फिर चाहे 6-7-8 -9 यह हमारी जूम सिस्टम को ऑन करता है। इससे व्यूअर हमारे पेज को जूम करके देख सकते हैं।
इस तरीके से कोई एरर नहीं दिखेगा
<meta name="viewport" content="width=device-width, initial-scale=1.0">
इस कोड को पेस्ट करने से हम अपने व्यूअर को जूम करने की किसी भी सीमा से नहीं बांधते अगर आप
एक टिप्पणी भेजें
आप अपने सवाल, सलाह या संदेश हमें दे सकते हैं।