Viewport size उस हिस्से की चौड़ाई और ऊँचाई है जिसमें ब्राउज़र वेब पेज दिखाता है, CSS पिक्सेल में मापी हुई। यह आम तौर पर डिवाइस के स्क्रीन resolution से काफ़ी छोटा होता है: 1206 × 2622 पिक्सेल की स्क्रीन वाले iPhone का viewport 402 × 874 CSS पिक्सेल है, क्योंकि हर CSS पिक्सेल हर दिशा में तीन असली पिक्सेल से बनाया जाता है। रिस्पॉन्सिव CSS, media queries और लेआउट से जुड़े ज़्यादातर फ़ैसले viewport size पर आधारित होते हैं, स्क्रीन resolution पर नहीं।
Viewport size बनाम स्क्रीन resolution
फ़ोन के डिस्प्ले को तीन संख्याएँ बताती हैं, और इन्हें आपस में मिला देना आसान है:
| शब्द | उदाहरण (iPhone 17) | क्या है |
|---|---|---|
| स्क्रीन resolution | 1206 × 2622 px | पैनल पर असली पिक्सेल |
| Device pixel ratio (DPR) | 3 | हर दिशा में एक CSS पिक्सेल में कितने असली पिक्सेल |
| Viewport size | 402 × 874 CSS px | resolution को DPR से भाग देने पर; जो CSS देखती है |
डेस्कटॉप पर DPR अक्सर 1 होता है (100% स्केलिंग पर 1920 × 1080 का मॉनिटर लगभग 1920 px चौड़ा viewport देता है, स्क्रॉलबार घटाकर), या हाई-डेंसिटी लैपटॉप स्क्रीन पर 2। ब्राउज़र का ज़ूम लेवल भी DPR बदलता है: 200% ज़ूम करने पर CSS पिक्सेल में viewport की चौड़ाई आधी हो जाती है।
हर फ़ोन के आँकड़ों के लिए iPhone viewport चार्ट देखें।
अपना viewport size कैसे जाँचें
ब्राउज़र console में
DevTools खोलें (F12 या Cmd + Option + I), Console में जाएँ और यह चलाएँ:
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth में वर्टिकल स्क्रॉलबार शामिल होता है। document.documentElement.clientWidth में नहीं, और यह उस चौड़ाई के ज़्यादा क़रीब है जिसे CSS के प्रतिशत और 100% चौड़ाई इस्तेमाल करते हैं।
DevTools के device mode में
device toolbar पेज के ऊपर एमुलेट किया गया viewport size दिखाता है। Responsive मोड में आप कोई भी साइज़ खींचकर या टाइप करके सेट कर सकते हैं। देखें Chrome मोबाइल एमुलेटर गाइड।
फ़ोन पर
कोई भी “what is my viewport” वेब पेज खोलें, या ऐसा पेज लोड करें जिसकी छोटी-सी स्क्रिप्ट innerWidth और devicePixelRatio दिखाए। याद रखें कि नतीजा ओरिएंटेशन और ब्राउज़र के टूलबार पर निर्भर करता है।
Layout viewport और visual viewport
मोबाइल ब्राउज़र में असल में दो viewport होते हैं:
- Layout viewport वह हिस्सा है जिसमें CSS पेज का लेआउट बनाती है। सही viewport meta tag होने पर इसकी चौड़ाई CSS पिक्सेल में डिवाइस की चौड़ाई के बराबर होती है।
- Visual viewport वह हिस्सा है जो इस समय स्क्रीन पर दिख रहा है। जब यूज़र उँगलियों से ज़ूम करता है या ऑन-स्क्रीन कीबोर्ड खुलता है, तो यह छोटा हो जाता है।
position: fixed वाले एलिमेंट layout viewport के हिसाब से रखे जाते हैं, इसीलिए कोई fixed फ़ुटर कीबोर्ड के पीछे छिप सकता है। JavaScript window.visualViewport.width और .height से visual viewport पढ़ सकता है, और उसके resize event को सुन सकता है।
मोबाइल पर viewport की ऊँचाई बार-बार क्यों बदलती है
फ़ोन पर स्क्रॉल करते समय एड्रेस बार और टूलबार सिमट जाते हैं, इसलिए दिखने वाली ऊँचाई बदलती रहती है। पुराना 100vh सबसे बड़ी संभव ऊँचाई इस्तेमाल करता है, इसीलिए पूरी ऊँचाई वाले सेक्शन पहले नीचे से कट जाते थे। अब CSS में हर हालत के लिए units हैं:
| Unit | मतलब |
|---|---|
svh |
Small viewport height: टूलबार पूरे दिख रहे हों |
lvh |
Large viewport height: टूलबार पूरे छिपे हों |
dvh |
Dynamic viewport height: टूलबार हिलने के साथ बदलती है |
vh |
आधुनिक मोबाइल ब्राउज़रों में lvh जैसा ही |
ऐसे hero सेक्शन के लिए जो पेज लोड होते समय स्क्रीन में समा जाए, min-height: 100svh आम तौर पर सबसे सुरक्षित है। चौड़ाई के लिए इनसे मेल खाते svw, lvw और dvw units भी हैं।
आम viewport साइज़
| डिवाइस का प्रकार | आम viewport चौड़ाई (portrait) |
|---|---|
| छोटे फ़ोन | 320–375 px |
| मौजूदा iPhone | 375–440 px |
| Android फ़ोन | 360–412 px |
| टैबलेट | 744–1032 px |
| लैपटॉप | 1280–1536 px |
| डेस्कटॉप मॉनिटर | 1440–2560 px |
इन्हीं रेंज की वजह से रिस्पॉन्सिव लेआउट ठीक साइज़ को टारगेट करने के बजाय breakpoints के बीच फ़्लूइड बनाए जाते हैं।
अलग-अलग viewport साइज़ टेस्ट करना
डेस्कटॉप विंडो छोटी करने से viewport की चौड़ाई बदलती है, लेकिन डेस्कटॉप ब्राउज़र आम तौर पर लगभग 500 px पर रुक जाते हैं और DPR 1 या 2 ही रहता है। सही साइज़ और pixel ratio वाला फ़ोन viewport देखने के लिए DevTools का device mode, या Mobile View Extension जैसा मोबाइल व्यू एक्सटेंशन इस्तेमाल करें, जो डिवाइस का स्क्रीन साइज़, pixel ratio और user agent लागू करता है और अपना resolution भी डालने देता है। पूरी प्रक्रिया रिस्पॉन्सिव डिज़ाइन कैसे टेस्ट करें में है।
अक्सर पूछे जाने वाले सवाल
मेरा viewport size क्या है?
अपने ब्राउज़र के console में window.innerWidth और window.innerHeight चलाएँ। फ़ोन पर ऐसा पेज खोलें जो ये वैल्यू दिखाए; ओरिएंटेशन बदलने पर नतीजा बदल जाता है।
क्या viewport size और स्क्रीन resolution एक ही हैं?
नहीं। Viewport size CSS पिक्सेल में होता है; स्क्रीन resolution असली पिक्सेल में। viewport size पाने के लिए resolution को device pixel ratio से भाग दें।
किस viewport size के लिए डिज़ाइन करें?
ऐसे फ़्लूइड लेआउट बनाएँ जो 320 px से ऊपर काम करें। फ़ोन की आम चौड़ाइयाँ 360, 390–402 और 430–440 px, लगभग 768–834 px का टैबलेट, और लगभग 1280–1440 px का डेस्कटॉप ज़रूर जाँचें।