श्रेणी: डेवलपर टूल
व्यूपोर्ट मेटा जनरेटर
एक रिस्पॉन्सिव व्यूपोर्ट मेटा टैग जनरेट करें और इसके विकल्प समझें
अपने पेज के व्यूपोर्ट मेटा टैग के लिए width, initial scale, ज़ूम सीमाएँ, पिंच-ज़ूम अनुमति और viewport-fit सेट करें, हर विकल्प की संक्षिप्त व्याख्या के साथ, और तैयार टैग को अपने <head> में कॉपी करें। पूरी तरह आपके ब्राउज़र में बना।
इसे बंद करने से पिंच-टू-ज़ूम रुक जाता है, जो सुलभता (accessibility) को नुकसान पहुँचाता है — अधिकतर साइटों को इसे चालू रखना चाहिए।
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
व्यूपोर्ट मेटा टैग किसी मोबाइल ब्राउज़र को बताता है कि पेज को कैसे साइज़ और स्केल किया जाए — इसके बिना, फ़ोन पेजों को एक स्थिर डेस्कटॉप-जैसी चौड़ाई पर रेंडर करते हैं और ज़ूम आउट कर देते हैं, यही वजह है कि यह मोबाइल-फ़्रेंडली जाँचकर्ता की सबसे पहली जाँचों में से एक है। width=device-width और initial-scale=1 सेट करना आम मामले को कवर करता है, लेकिन स्केल सीमाएँ और viewport-fit विकल्पों को बिना सोचे-समझे कॉपी-पेस्ट करने की बजाय समझना ज़रूरी है, क्योंकि ज़ूम को पूरी तरह बंद करना कम दृष्टि वाले उपयोगकर्ताओं के लिए एक सुलभता (accessibility) समस्या है।
इस्तेमाल कैसे करें
- जब तक कोई ख़ास वजह न हो, width को "device-width" ही रहने दें।
- एक प्रारंभिक स्केल सेट करें, और वैकल्पिक रूप से न्यूनतम/अधिकतम ज़ूम सीमाएँ।
- तय करें कि पिंच-टू-ज़ूम की अनुमति देनी है या नहीं — इसे चालू रखने की सलाह दी जाती है।
- अगर आपके डिज़ाइन को नॉच या सेफ़-एरिया इनसेट तक पहुँचना है तो एक viewport-fit वैल्यू चुनें।
- जनरेट किए गए टैग को अपने पेज के <head> में कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या मुझे "आकस्मिक" ज़ूमिंग रोकने के लिए user-scalable को बंद कर देना चाहिए?
- आमतौर पर नहीं — पिंच-टू-ज़ूम रोकने से कम दृष्टि वाले विज़िटर आपकी सामग्री पढ़ने के लिए ज़ूम इन नहीं कर पाते, जिसे सुलभता दिशानिर्देश (WCAG 1.4.4) द्वारा फ़्लैग किया जाता है। ज़ूम बंद करने की बजाय लेआउट समस्याओं को ठीक करें।
- viewport-fit=cover असल में क्या करता है?
- नॉच या गोल कोनों वाले डिवाइस पर, यह आपके पेज की पृष्ठभूमि को उन सेफ़-एरिया इनसेट तक बढ़ने देता है बजाय काली पट्टी छोड़ने के, जबकि आप env(safe-area-inset-*) CSS फ़ंक्शन का इस्तेमाल करके सामग्री को नॉच से दूर रखते हैं।
- क्या width=device-width हमेशा सही होता है?
- अधिकतर रिस्पॉन्सिव साइटों के लिए, हाँ — यह CSS व्यूपोर्ट को डिवाइस की स्वाभाविक चौड़ाई से मिलाता है ताकि आपके रिस्पॉन्सिव ब्रेकपॉइंट अनुमानित तरीक़े से व्यवहार करें।