व्यूपोर्ट (Viewport) कैसे सेट करें

मोबाइल डिवाइसेज़ पर वेब पेज को सही ढंग से रेंडर करने के लिए व्यूपोर्ट मेटा टैग आवश्यक है। यह ब्राउज़र को पेज की चौड़ाई और प्रारंभिक ज़ूम स्तर को नियंत्रित करने का निर्देश देता है।

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

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

पैरामीटर्स समझाए गए

अतिरिक्त पैरामीटर्स (वैकल्पिक)

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0, 
               minimum-scale=1.0, maximum-scale=5.0, 
               user-scalable=yes">

• minimum-scale - न्यूनतम ज़ूम (डिफ़ॉल्ट 1.0)
• maximum-scale - अधिकतम ज़ूम (डिफ़ॉल्ट 5.0)
• user-scalable - उपयोगकर्ता ज़ूम कर सकता है या नहीं (yes/no)

क्यों आवश्यक है?

• बिना व्यूपोर्ट के, मोबाइल ब्राउज़र पेज को डेस्कटॉप चौड़ाई (980px) पर रेंडर करते हैं और ज़ूम आउट कर देते हैं
• टेक्स्ट पढ़ने लायक नहीं होता, हॉरिजॉन्टल स्क्रॉलिंग आवश्यक होती है
• व्यूपोर्ट टैग के साथ, पेज डिवाइस चौड़ाई पर 1:1 स्केल पर रेंडर होता है

HTML5 बॉयलरप्लेट में स्थान

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>पेज शीर्षक</title>
  <!-- अन्य मेटा, CSS, JS -->
</head>
<body>...</body>
</html>