नई सीएसएस यूनिट, जो डाइनैमिक टूलबार वाले मोबाइल व्यूपोर्ट का इस्तेमाल करती हैं.
व्यूपोर्ट और उसकी इकाइयां
किसी चीज़ का साइज़ व्यूपोर्ट के बराबर करने के लिए, vw और vh यूनिट का इस्तेमाल किया जा सकता है.
vw= व्यूपोर्ट के साइज़ की चौड़ाई का 1%.vh= व्यूपोर्ट के साइज़ की ऊंचाई का 1%.
किसी एलिमेंट की चौड़ाई 100vw और ऊंचाई 100vh रखें. इससे व्यूपोर्ट को पूरा कवर हो जाएगा.
व्यूपोर्ट को नीले रंग के डैश वाले बॉर्डर से दिखाया जाता है.
vw और vh यूनिट, इन अतिरिक्त यूनिट के साथ ब्राउज़र पर ऐक्सेस की गईं
vi= व्यूपोर्ट के इनलाइन ऐक्सिस के साइज़ का 1%.vb= व्यूपोर्ट के ब्लॉक ऐक्सिस के साइज़ का 1%.vmin=vwयाvhसे कम.vmax=vwयाvhसे बड़ा होना चाहिए.
ये यूनिट, ब्राउज़र के साथ काम करती हैं.
ब्राउज़र सहायता
- 20
- 12
- 19
- 6
नई व्यूपोर्ट यूनिट की ज़रूरत
मौजूदा यूनिट, डेस्कटॉप पर अच्छी तरह काम करती हैं, लेकिन मोबाइल डिवाइसों पर इसे कुछ अलग तरीके से दिखाया जाता है. वहां, व्यूपोर्ट के साइज़ पर डाइनैमिक टूलबार के होने या न होने का असर पड़ता है. ये पता बार और टैब बार जैसे यूज़र इंटरफ़ेस होते हैं.
हालांकि, व्यूपोर्ट का साइज़ बदल सकता है, लेकिन vw और vh के साइज़ में बदलाव नहीं होता. इस वजह से, 100vh की ऊंचाई वाले एलिमेंट को व्यूपोर्ट से बाहर ले जाया जाएगा.
नीचे की ओर स्क्रोल करने पर, ये डाइनैमिक टूलबार वापस चले जाएंगे. इस स्थिति में, 100vh की ऊंचाई वाले एलिमेंट पूरे व्यूपोर्ट को कवर करेंगे.
इस समस्या को हल करने के लिए, सीएसएस के वर्किंग ग्रुप में व्यूपोर्ट की अलग-अलग स्थितियों को तय किया गया है.
- बड़ा व्यूपोर्ट: व्यूपोर्ट का साइज़, यह मानते हुए कि UA इंटरफ़ेस डाइनैमिक तौर पर बड़ा होता है और वापस लिया जाता है.
- छोटा व्यूपोर्ट: व्यूपोर्ट का साइज़, यह मानकर चलता है कि इसमें कोई भी UA इंटरफ़ेस है, जिसे डाइनैमिक तौर पर बड़ा किया गया है और बड़ा किया गया है.
नए व्यूपोर्ट में भी उन्हें असाइन की गई इकाइयां होती हैं:
- बड़े व्यूपोर्ट को दिखाने वाली यूनिट में
lvप्रीफ़िक्स होता है. यूनिटlvw,lvh,lvi,lvb,lvmin, औरlvmaxहैं. - छोटे व्यूपोर्ट को दिखाने वाली यूनिट में
svप्रीफ़िक्स होता है. यूनिटsvw,svh,svi,svb,svmin, औरsvmaxहैं.
व्यूपोर्ट-प्रतिशत इकाइयों के आकार तब तक तय (और इसलिए स्थिर) रहते हैं, जब तक व्यूपोर्ट का आकार नहीं बदला जाता.
एक एलिमेंट का साइज़ 100svh और दूसरे का 100lvh है.
बड़े और छोटे व्यूपोर्ट के अलावा, एक डाइनैमिक व्यूपोर्ट भी होता है जिसमें UA यूज़र इंटरफ़ेस (यूआई) को डाइनैमिक तरीके से दिखाने की सुविधा होती है:
- जब डाइनैमिक टूलबार को बड़ा किया जाता है, तो डाइनैमिक व्यूपोर्ट का साइज़, छोटे व्यूपोर्ट के साइज़ के बराबर होता है.
- जब डाइनैमिक टूलबार वापस ले लिए जाते हैं, तो डाइनैमिक व्यूपोर्ट, बड़े व्यूपोर्ट के साइज़ के बराबर होता है.
इसके साथ जुड़ी इकाइयों के dv प्रीफ़िक्स हैं: dvw, dvh, dvi, dvb, dvmin, और dvmax. उनके साइज़ को, lv* और sv* वाले वैरिएंट के बीच रखा जाता है.
ये यूनिट Chrome 108 पर शिप होते हैं और Safari और Firefox से जुड़ते हैं. इन दोनों में पहले से ही सुविधा उपलब्ध है.
ब्राउज़र सहायता
- 108
- 108
- 101
- 15.4
ध्यान दें
व्यूपोर्ट यूनिट के बारे में जानने के लिए यहां कुछ चेतावनियां दी गई हैं:
कोई भी व्यूपोर्ट यूनिट, स्क्रोलबार के साइज़ का ध्यान नहीं रखती. जिन सिस्टम में क्लासिक स्क्रोलबार चालू हैं उनमें
100vwके साइज़ वाले एलिमेंट की चौड़ाई थोड़ी ज़्यादा होगी. यह हर स्पेसिफ़िकेशन के मुताबिक है.डाइनैमिक व्यूपोर्ट के लिए वैल्यू 60fps पर अपडेट नहीं होती हैं. UA यूज़र इंटरफ़ेस (यूआई) के बड़ा या घटने-बढ़ने पर, सभी ब्राउज़र में अपडेट करना थ्रॉटल हो जाता है. कुछ ब्राउज़र इस्तेमाल किए गए जेस्चर (स्लो स्क्रोल बनाम स्वाइप) के आधार पर अपडेट होने की प्रोसेस को पूरी तरह से खारिज करते हैं.
ऑन-स्क्रीन कीबोर्ड (जिसे वर्चुअल कीबोर्ड भी कहा जाता है) को UA यूज़र इंटरफ़ेस (यूआई) का हिस्सा नहीं माना जाता. इसलिए, यह व्यूपोर्ट यूनिट के साइज़ पर असर नहीं डालता. Chrome में आपके पास ऐसी कार्रवाई के लिए ऑप्ट-इन करने का विकल्प होता है जिसमें वर्चुअल कीबोर्ड का असर, व्यूपोर्ट यूनिट पर पड़ता हो.
अन्य संसाधन
व्यूपोर्ट और इन यूनिट के बारे में ज़्यादा जानने के लिए एचटीटीपी 203 का यह एपिसोड देखें. इसमें ब्रैमस, जेक को अलग-अलग व्यूपोर्ट के बारे में बताते हैं. साथ ही, यह बताते हैं कि इन यूनिट के साइज़ कैसे तय किए जाते हैं.
पढ़ने के लिए अतिरिक्त कॉन्टेंट: