Meta viewport tag क्या है: मोबाइल के लिए सही viewport सेटिंग

मोबाइल viewport meta tag क्या करता है, हर पेज को कौन-सी एक लाइन चाहिए, किन वैल्यू से बचें, और viewport-fit व interactive-widget जैसे नए विकल्प।

viewport meta tag मोबाइल ब्राउज़र को बताता है कि पेज का लेआउट वाला हिस्सा कितना चौड़ा बनाना है और शुरुआत में कितना ज़ूम रखना है। लगभग हर वेबसाइट के <head> में ठीक यही लाइन होनी चाहिए:

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

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

viewport meta tag के बिना क्या होता है

जब स्मार्टफ़ोन पहली बार आए, तब ज़्यादातर वेबसाइटें डेस्कटॉप स्क्रीन के लिए बनी थीं। उन्हें दिखाने के लिए मोबाइल ब्राउज़रों ने डेस्कटॉप जितना बड़ा “layout viewport” होने का दिखावा किया (iOS Safari और Android के Chrome में 980 px) और ज़ूम-आउट कर दिया ताकि पूरा पेज स्क्रीन में आ जाए। फिर यूज़र पढ़ने के लिए उँगलियों से ज़ूम करते थे।

यही डिफ़ॉल्ट आज भी हर उस पेज पर लागू होता है जिसमें viewport tag नहीं है। 390 px चौड़ी स्क्रीन वाले फ़ोन पर ऐसा पेज:

CSS और JavaScript को लगभग 980 px की viewport चौड़ाई बताता है
(max-width: 600px) जैसी media queries से कभी मेल नहीं खाता
टेक्स्ट को उसके इच्छित साइज़ के लगभग 40% पर दिखाता है

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

हर वैल्यू का मतलब

वैल्यू	मतलब	सुझाव
`width=device-width`	layout viewport को CSS पिक्सेल में डिवाइस की चौड़ाई के बराबर रखें (जैसे कई iPhone पर 390)	हाँ
`initial-scale=1`	100% ज़ूम से शुरू करें, 1 CSS पिक्सेल = 1 device-independent पिक्सेल	हाँ
`minimum-scale`	सबसे कम अनुमत ज़ूम	शायद ही चाहिए
`maximum-scale`	सबसे ज़्यादा अनुमत ज़ूम	5 से कम वैल्यू से बचें
`user-scalable=no`	उँगलियों से ज़ूम बंद करता है	बचें
`width=1024` (तय संख्या)	लेआउट की चौड़ाई तय कर देता है	रिस्पॉन्सिव साइट पर बचें
`viewport-fit=cover`	पेज को notch और गोल कोनों के नीचे तक फैलाता है	सिर्फ़ safe-area padding के साथ
`interactive-widget`	तय करता है कि ऑन-स्क्रीन कीबोर्ड पेज का साइज़ कैसे बदले	वैकल्पिक

ज़ूम बंद क्यों नहीं करना चाहिए

user-scalable=no और maximum-scale=1 लोगों को ज़ूम करने से रोकते हैं। इससे कमज़ोर नज़र वाले लोगों के लिए पेज पढ़ना मुश्किल या नामुमकिन हो जाता है, और यह WCAG की उस शर्त से टकराता है कि टेक्स्ट को 200% तक बड़ा किया जा सके। Lighthouse अपने एक्सेसिबिलिटी ऑडिट में इसे पकड़ता है।

डेवलपर अक्सर इसे इसलिए जोड़ते हैं ताकि iOS Safari फ़ॉर्म फ़ील्ड पर ज़ूम न करे। इसका सही हल है इनपुट पर कम-से-कम 16 px का फ़ॉन्ट साइज़:

input, select, textarea { font-size: 1rem; }

आधुनिक iOS Safari उँगलियों वाले ज़ूम के लिए वैसे भी user-scalable=no को अनदेखा करता है, इसलिए यह टैग ज़्यादातर दूसरे ब्राउज़रों को ही नुक़सान पहुँचाता है।

viewport-fit=cover और safe areas

notch, dynamic island या गोल कोनों वाले फ़ोन पर ब्राउज़र डिफ़ॉल्ट रूप से पेज को एक सुरक्षित आयत के अंदर रखते हैं। viewport-fit=cover पेज को पूरी स्क्रीन भरने देता है, जो किनारे तक फैले डिज़ाइन के लिए आप चाह सकते हैं। तब आपको ख़ुद कंटेंट को notch और home indicator से दूर रखना होगा:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.site-header {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }

इसे landscape में टेस्ट करें, जहाँ notch किनारे पर होता है।

कीबोर्ड खुलने पर ब्राउज़र या तो सिर्फ़ visual viewport छोटा करते हैं (Chrome और Safari में डिफ़ॉल्ट), या पूरा लेआउट। नई interactive-widget वैल्यू से आप चुन सकते हैं:

resizes-visual: डिफ़ॉल्ट; लेआउट उतना ही बड़ा रहता है और कीबोर्ड उसका एक हिस्सा ढक लेता है
resizes-content: layout viewport छोटा हो जाता है, इसलिए 100dvh वाले एलिमेंट और तय फ़ुटर कीबोर्ड के ऊपर खिसक जाते हैं
overlays-content: कुछ भी साइज़ नहीं बदलता; इसे ख़ुद संभालने के लिए VirtualKeyboard API इस्तेमाल करें

ब्राउज़रों में सपोर्ट अलग-अलग है (Chromium-आधारित ब्राउज़र इसे सपोर्ट करते हैं; भरोसा करने से पहले मौजूदा सपोर्ट देख लें), इसलिए दोनों हालात में फ़ॉर्म असली फ़ोन पर टेस्ट करें।

पुरानी वैल्यू जिन्हें हटा सकते हैं

shrink-to-fit=no iOS 9 के लिए एक जुगाड़ था और अब इसका कोई असर नहीं।
target-densitydpi पुरानी Android वैल्यू थी और अब अनदेखी की जाती है।
<meta name="HandheldFriendly"> और <meta name="MobileOptimized"> फ़ीचर फ़ोन के ज़माने के हैं।

अपना viewport tag कैसे जाँचें

पेज का सोर्स देखें और name="viewport" खोजें। यह ठीक एक बार होना चाहिए।
मोबाइल मोड में Lighthouse ऑडिट चलाएँ (कैसे करें); यह गायब या ज़ूम रोकने वाले viewport tag की रिपोर्ट करता है।
पेज को मोबाइल व्यू में खोलें। DevTools के device mode में, या असली फ़ोन साइज़ पर पेज लोड करने वाले मोबाइल व्यू एक्सटेंशन में, बिना टैग वाला पेज ज़ूम-आउट और बारीक टेक्स्ट वाला दिखता है।

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

सही viewport meta tag कौन-सा है?

<meta name="viewport" content="width=device-width, initial-scale=1">। viewport-fit=cover सिर्फ़ तब जोड़ें जब आप पूरी स्क्रीन वाले लेआउट डिज़ाइन करते हैं और safe areas संभालते हैं।

क्या रिस्पॉन्सिव डिज़ाइन के लिए viewport meta tag ज़रूरी है?

हाँ। इसके बिना मोबाइल ब्राउज़र पेजों को लगभग 980 px चौड़ा बनाते हैं, इसलिए मोबाइल वाली media queries कभी लागू नहीं होतीं।

क्या user-scalable=no इस्तेमाल करना बुरा है?

हाँ, एक्सेसिबिलिटी के लिहाज़ से। यह यूज़र्स को टेक्स्ट ज़ूम करने से रोकता है। फ़ॉर्म फ़ील्ड पर अनचाहा ज़ूम इसकी जगह इनपुट के 16 px फ़ॉन्ट साइज़ से ठीक करें।