बड़ी, छोटी, और डाइनैमिक व्यूपोर्ट यूनिट

नई सीएसएस यूनिट, जो डाइनैमिक टूलबार वाले मोबाइल व्यूपोर्ट का इस्तेमाल करती हैं.

Bramus

व्यूपोर्ट और उसकी इकाइयां

किसी चीज़ का साइज़ व्यूपोर्ट के बराबर करने के लिए, vw और vh यूनिट का इस्तेमाल किया जा सकता है.

  • vw = व्यूपोर्ट के साइज़ की चौड़ाई का 1%.
  • vh = व्यूपोर्ट के साइज़ की ऊंचाई का 1%.

किसी एलिमेंट की चौड़ाई 100vw और ऊंचाई 100vh रखें. इससे व्यूपोर्ट को पूरा कवर हो जाएगा.

हल्का नीला एलिमेंट, जिसे 100vw x 100vh पर सेट किया गया है. यह एलिमेंट पूरा व्यूपोर्ट कवर करता है. व्यूपोर्ट को नीले रंग के डैश वाले बॉर्डर का इस्तेमाल करके दिखाया जाता है.
एक हल्के नीले रंग का एलिमेंट, जिसे 100vw x 100vh पर सेट किया गया है. यह एलिमेंट पूरा व्यूपोर्ट कवर करता है.
व्यूपोर्ट को नीले रंग के डैश वाले बॉर्डर से दिखाया जाता है.

vw और vh यूनिट, इन अतिरिक्त यूनिट के साथ ब्राउज़र पर ऐक्सेस की गईं

  • vi = व्यूपोर्ट के इनलाइन ऐक्सिस के साइज़ का 1%.
  • vb = व्यूपोर्ट के ब्लॉक ऐक्सिस के साइज़ का 1%.
  • vmin = vw या vh से कम.
  • vmax = vw या vh से बड़ा होना चाहिए.

ये यूनिट, ब्राउज़र के साथ काम करती हैं.

ब्राउज़र सहायता

  • 20
  • 12
  • 19
  • 6

नई व्यूपोर्ट यूनिट की ज़रूरत

मौजूदा यूनिट, डेस्कटॉप पर अच्छी तरह काम करती हैं, लेकिन मोबाइल डिवाइसों पर इसे कुछ अलग तरीके से दिखाया जाता है. वहां, व्यूपोर्ट के साइज़ पर डाइनैमिक टूलबार के होने या न होने का असर पड़ता है. ये पता बार और टैब बार जैसे यूज़र इंटरफ़ेस होते हैं.

हालांकि, व्यूपोर्ट का साइज़ बदल सकता है, लेकिन vw और vh के साइज़ में बदलाव नहीं होता. इस वजह से, 100vh की ऊंचाई वाले एलिमेंट को व्यूपोर्ट से बाहर ले जाया जाएगा.

मोबाइल पर 100vh की ऊंचाई बहुत ज़्यादा है.
मोबाइल पर 100vh की लंबाई बहुत ज़्यादा होती है.

नीचे की ओर स्क्रोल करने पर, ये डाइनैमिक टूलबार वापस चले जाएंगे. इस स्थिति में, 100vh की ऊंचाई वाले एलिमेंट पूरे व्यूपोर्ट को कवर करेंगे.

जब उपयोगकर्ता-एजेंट के यूज़र इंटरफ़ेस वापस ले लिए जाते हैं, तब मोबाइल पर 100vh का मतलब "सही" होता है.
जब उपयोगकर्ता-एजेंट के यूज़र इंटरफ़ेस वापस ले लिए जाते हैं, तब मोबाइल पर 100vh का मतलब "सही" होता है.

इस समस्या को हल करने के लिए, सीएसएस के वर्किंग ग्रुप में व्यूपोर्ट की अलग-अलग स्थितियों को तय किया गया है.

  • बड़ा व्यूपोर्ट: व्यूपोर्ट का साइज़, यह मानते हुए कि UA इंटरफ़ेस डाइनैमिक तौर पर बड़ा होता है और वापस लिया जाता है.
  • छोटा व्यूपोर्ट: व्यूपोर्ट का साइज़, यह मानकर चलता है कि इसमें कोई भी UA इंटरफ़ेस है, जिसे डाइनैमिक तौर पर बड़ा किया गया है और बड़ा किया गया है.
बड़े और छोटे व्यूपोर्ट के विज़ुअलाइज़ेशन.
बड़े और छोटे व्यूपोर्ट के विज़ुअलाइज़ेशन.

नए व्यूपोर्ट में भी उन्हें असाइन की गई इकाइयां होती हैं:

  • बड़े व्यूपोर्ट को दिखाने वाली यूनिट में lv प्रीफ़िक्स होता है. यूनिट lvw, lvh, lvi, lvb, lvmin, और lvmax हैं.
  • छोटे व्यूपोर्ट को दिखाने वाली यूनिट में sv प्रीफ़िक्स होता है. यूनिट svw, svh, svi, svb, svmin, और svmax हैं.

व्यूपोर्ट-प्रतिशत इकाइयों के आकार तब तक तय (और इसलिए स्थिर) रहते हैं, जब तक व्यूपोर्ट का आकार नहीं बदला जाता.

दो मोबाइल ब्राउज़र विज़ुअलाइज़ेशन, एक-दूसरे के बगल में रखे गए हैं. एक एलिमेंट का साइज़ 100svh और दूसरे का 100lvh है.
दो मोबाइल ब्राउज़र विज़ुअलाइज़ेशन, एक-दूसरे के बगल में हैं.
एक एलिमेंट का साइज़ 100svh और दूसरे का 100lvh है.

बड़े और छोटे व्यूपोर्ट के अलावा, एक डाइनैमिक व्यूपोर्ट भी होता है जिसमें UA यूज़र इंटरफ़ेस (यूआई) को डाइनैमिक तरीके से दिखाने की सुविधा होती है:

  • जब डाइनैमिक टूलबार को बड़ा किया जाता है, तो डाइनैमिक व्यूपोर्ट का साइज़, छोटे व्यूपोर्ट के साइज़ के बराबर होता है.
  • जब डाइनैमिक टूलबार वापस ले लिए जाते हैं, तो डाइनैमिक व्यूपोर्ट, बड़े व्यूपोर्ट के साइज़ के बराबर होता है.

इसके साथ जुड़ी इकाइयों के dv प्रीफ़िक्स हैं: dvw, dvh, dvi, dvb, dvmin, और dvmax. उनके साइज़ को, lv* और sv* वाले वैरिएंट के बीच रखा जाता है.

100dvh, व्यूपोर्ट के बड़े या छोटे साइज़ के हिसाब से खुद को ऑप्टिमाइज़ करता है.
100dvh, व्यूपोर्ट के बड़े या छोटे साइज़ के हिसाब से खुद को ऑप्टिमाइज़ करता है.

ये यूनिट Chrome 108 पर शिप होते हैं और Safari और Firefox से जुड़ते हैं. इन दोनों में पहले से ही सुविधा उपलब्ध है.

ब्राउज़र सहायता

  • 108
  • 108
  • 101
  • 15.4

ध्यान दें

व्यूपोर्ट यूनिट के बारे में जानने के लिए कुछ चेतावनियां हैं:

  • कोई भी व्यूपोर्ट यूनिट, स्क्रोलबार के साइज़ का ध्यान नहीं रखती. जिन सिस्टम में क्लासिक स्क्रोलबार चालू हैं उनमें 100vw के साइज़ वाले एलिमेंट की चौड़ाई थोड़ी ज़्यादा होगी. यह हर स्पेसिफ़िकेशन के मुताबिक है.

  • डाइनैमिक व्यूपोर्ट के लिए वैल्यू 60fps पर अपडेट नहीं होती हैं. UA यूज़र इंटरफ़ेस (यूआई) के बड़ा या घटने-बढ़ने पर, सभी ब्राउज़र में अपडेट करना थ्रॉटल हो जाता है. कुछ ब्राउज़र इस्तेमाल किए गए जेस्चर (स्लो स्क्रोल बनाम स्वाइप) के आधार पर अपडेट होने की प्रोसेस को पूरी तरह से खारिज करते हैं.

  • ऑन-स्क्रीन कीबोर्ड (जिसे वर्चुअल कीबोर्ड भी कहा जाता है) को UA यूज़र इंटरफ़ेस (यूआई) का हिस्सा नहीं माना जाता. इसलिए, यह व्यूपोर्ट यूनिट के साइज़ पर असर नहीं डालता. Chrome में आपके पास ऐसी कार्रवाई के लिए ऑप्ट-इन करने का विकल्प होता है जिसमें वर्चुअल कीबोर्ड का असर, व्यूपोर्ट यूनिट पर पड़ता हो.

ज़्यादा रिसॉर्स

व्यूपोर्ट और इन यूनिट के बारे में ज़्यादा जानने के लिए एचटीटीपी 203 का यह एपिसोड देखें. इसमें ब्रैमस, जेक को अलग-अलग व्यूपोर्ट के बारे में बताते हैं. साथ ही, यह बताते हैं कि इन यूनिट के साइज़ कैसे तय किए जाते हैं.

पढ़ने के लिए अतिरिक्त कॉन्टेंट:

यह नई इंटरऑपरेबल सीरीज़ का हिस्सा है