नए CSS Viewport Units: svh, lvh, dvh

• viewport की चौड़ाई/ऊंचाई के आधार पर सेट करना सुविधाजनक है, लेकिन vh में मोबाइल पर कई bugs हैं
  → क्योंकि viewport size में browser के address bar UI को शामिल नहीं किया जाता
• 100vh को मोबाइल पर पूरे viewport height के बराबर होना चाहिए, लेकिन scroll करते समय UI को छिपाने वाले Safari/Chrome (Android) में समस्या होती है
• इसलिए CSS Working Group ने नए units पेश किए: svh, lvh, dvh
  • svh Small Viewport: address bar UI के छोटा न होने की स्थिति में viewport height
  • lvh Large Viewport: address bar UI के छोटा हो जाने की स्थिति में viewport height
  • dvh Dynamic Viewport: svh / lvh के बीच dynamically बदलता है
• 100dvh का उपयोग करके सबसे नीचे मौजूद button को हमेशा दिखने के लिए सेट किया जा सकता है
  • लेकिन performance issue हो सकता है, इसलिए सावधानी ज़रूरी है

[hided62]

वाह! Firefox for Android में position:fixed, bottom: 0 इस्तेमाल करते समय कुछ चीज़ें बेहद अजीब तरह से काम करती थीं, तो अब देखना होगा कि क्या यह समस्या हल होती है।

[tobyyun]

https://caniuse.com/viewport-unit-variants

iOS में 15.4 से, Android में 114 से सपोर्ट है।

[tomriddle7]

Viewport Unit इतने ज़्यादा हो गए हैं कि अब कन्फ्यूजन होने लगा है।

[carnoxen]

यह समस्या तो browser की जिम्मेदारी होनी चाहिए, लेकिन विडंबना यह है कि इसकी जिम्मेदारी standards group उठा रहा है...