HTML व्यूपोर्ट मेटा टैग का उपयोग उत्तरदायी वेबसाइट बनाने के लिए किया जाता है। ताकि वेब पेज व्यूपोर्ट के अनुसार अपनी चौड़ाई को एडजस्ट कर सके।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
व्यूपोर्ट मेटा टैग की विशेषताएं
| विशेषता | स्पष्टीकरण |
|---|---|
| चौड़ाई | यह डिवाइस की वर्चुअल व्यूपोर्ट चौड़ाई निर्दिष्ट करता है। |
| ऊंचाई | यह डिवाइस की वर्चुअल व्यूपोर्ट ऊंचाई निर्दिष्ट करता है। |
| प्रारंभिक पैमाने | जब पृष्ठ पहली बार देखा जाता है तो यह ज़ूम स्तर निर्दिष्ट करता है। |
| न्यूनतम पैमाने | यह न्यूनतम ज़ूम स्तर निर्दिष्ट करता है जिससे उपयोगकर्ता पृष्ठ को ज़ूम कर सकता है। |
| अधिकतम पैमाने | यह उस अधिकतम ज़ूम स्तर को निर्दिष्ट करता है जिस तक उपयोगकर्ता पृष्ठ को ज़ूम कर सकता है। |
| उपयोगकर्ता-मापनीय | यह निर्दिष्ट करता है कि उपयोगकर्ता ज़ूम इन या आउट कर सकता है या नहीं। |
उदाहरण
आइए हम HTML व्यूपोर्ट मेटा टैग का एक उदाहरण देखें -
<!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;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML Viewport meta tag Demo</h1>
<p>
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
</p>
<p>
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
</p>
</body>
</html> आउटपुट
अब छोटे डिवाइस पर पेज कैसे प्रदर्शित होता है यह देखने के लिए ब्राउज़र विंडो का आकार बदलने का प्रयास करें।
