व्यूपोर्ट (Viewport) वेब डिज़ाइन में वेब पेज का दृश्यमान क्षेत्र (visible area) है। मोबाइल डिवाइसेज़ पर यह स्क्रीन आकार से अलग हो सकता है क्योंकि ब्राउज़र पेज को वर्चुअल विंडो में रेंडर कर सकते हैं।
व्यूपोर्ट सेट करना
<meta name="viewport" content="width=device-width, initial-scale=1.0">पैरामीटर्स
| पैरामीटर | कार्य |
|---|---|
<meta> | ब्राउज़र को पेज के आयाम और स्केलिंग नियंत्रित करने का निर्देश देता है |
width=device-width | पेज चौड़ाई को डिवाइस स्क्रीन चौड़ाई के बराबर सेट करता है |
initial-scale=1.0 | प्रारंभिक ज़ूम स्तर 100% (1.0) सेट करता है |
व्यूपोर्ट के बिना vs साथ
| बिना व्यूपोर्ट | व्यूपोर्ट के साथ |
|---|---|
| वर्चुअल विंडो ~980px | वास्तविक डिवाइस चौड़ाई |
| ज़ूम आउट (छोटा टेक्स्ट) | 1:1 स्केल, पढ़ने योग्य टेक्स्ट |
| हॉरिजॉन्टल स्क्रॉल आवश्यक | नो हॉरिजॉन्टल स्क्रॉल (अगर रिस्पॉन्सिव) |
| टच टार्गेट्स बहुत छोटे | उचित आकार के टच टार्गेट्स |
रिस्पॉन्सिव डिज़ाइन के लिए आवश्यक
व्यूपोर्ट मेटा टैग रिस्पॉन्सिव वेब डिज़ाइन की **पहली आवश्यकता** है। इसके बिना मीडिया क्वेरीज़ सही ब्रेकपॉइंट्स पर ट्रिगर नहीं होंगी।
/* यह मीडिया क्वेरी व्यूपोर्ट टैग के बिना काम नहीं करेगी */
@media (max-width: 767px) {
.container { flex-direction: column; }
}टेस्टिंग
ब्राउज़र डेवलपर टूल्स (F12) में डिवाइस टूलबार (Ctrl+Shift+M) से विभिन्न डिवाइस व्यूपोर्ट्स का अनुकरण करें।
