HTML व्यूपोर्ट मेटा टैग (रिस्पॉन्सिव वेब डिज़ाइन)

परिचय

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

सिंटैक्स

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

व्यूपोर्ट मेटा टैग के एट्रिब्यूट्स

एट्रिब्यूट	व्याख्या
width	डिवाइस के वर्चुअल व्यूपोर्ट की चौड़ाई निर्दिष्ट करता है (`device-width` डिवाइस की चौड़ाई के बराबर सेट करता है)
height	डिवाइस के वर्चुअल व्यूपोर्ट की ऊंचाई निर्दिष्ट करता है
initial-scale	पेज पहली बार विज़िट होने पर ज़ूम स्तर निर्दिष्ट करता है (1.0 = कोई ज़ूम नहीं)
minimum-scale	न्यूनतम ज़ूम स्तर निर्दिष्ट करता है जिस तक उपयोगकर्ता ज़ूम आउट कर सकता है
maximum-scale	अधिकतम ज़ूम स्तर निर्दिष्ट करता है जिस तक उपयोगकर्ता ज़ूम इन कर सकता है
user-scalable	निर्दिष्ट करता है कि उपयोगकर्ता ज़ूम इन/आउट कर सकता है या नहीं (`yes`/`no` या `1`/`0`)

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  p {
    text-align: left;
    max-width: 800px;
    margin: 1rem auto;
    line-height: 1.6;
  }
</style>
</head>
<body>
<h1>HTML व्यूपोर्ट मेटा टैग डेमो</h1>
<p>यह कुछ डमी टेक्स्ट वाला एक पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक पैराग्राफ है।</p>
<p>यह कुछ डमी टेक्स्ट वाला एक और पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक और पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक और पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक और पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक और पैराग्राफ है। यह कुछ डमी टेक्स्ट वाला एक और पैराग्राफ है।</p>
</body>
</html>

आउटपुट

मोबाइल डिवाइस पर, पेज डिवाइस की चौड़ाई पर सही ढंग से रेंडर होगा बिना क्षैतिज स्क्रॉल के। डेस्कटॉप पर ब्राउज़र विंडो का आकार बदलकर मोबाइल व्यू का अनुकरण कर सकते हैं।

सामान्य व्यूपोर्ट कॉन्फ़िगरेशन

कॉन्फ़िगरेशन	उपयोग मामला
`width=device-width, initial-scale=1.0`	मानक रिस्पॉन्सिव डिज़ाइन (अनुशंसित)
`width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no`	ज़ूम अक्षम (एक्सेसिबिलिटी के लिए अनुशंसित नहीं)
`width=1024`	फिक्स्ड चौड़ाई लेआउट (पुराने साइट्स)

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

मोबाइल ब्राउज़र डिफ़ॉल्ट रूप से पेज को डेस्कटॉप चौड़ाई (980px) पर रेंडर करते हैं फिर छोटा करते हैं
व्यूपोर्ट टैग के बिना, मोबाइल पर टेक्स्ट पढ़ने के लिए ज़ूम करना पड़ता है
यह CSS मीडिया क्वेरीज़ को सही डिवाइस चौड़ाई पर काम करने देता है
Google मोबाइल-फ्रेंडली रैंकिंग के लिए इसकी आवश्यकता है

CSS मीडिया क्वेरीज़ के साथ उपयोग

/* व्यूपोर्ट टैग के साथ मीडिया क्वेरीज़ सही काम करती हैं */
@media (max-width: 768px) {
  nav { display: none; }
  .hamburger { display: block; }
}
@media (min-width: 769px) {
  .hamburger { display: none; }
}

ब्राउज़र समर्थन

सभी मोबाइल और आधुनिक डेस्कटॉप ब्राउज़रों में समर्थित।