Menggunakan unit Viewport dinamis

• Di desktop, vw dan vh merepresentasikan ukuran viewport dengan baik
• Di mobile, ukurannya dipengaruhi oleh UI yang muncul secara dinamis seperti toolbar dan bilah alamat. Karena itu, 100vh bisa melebihi ukuran viewport, atau saat bilah alamat menyusut karena scrolling, ukurannya akan menyesuaikan dengan ukuran viewport
• CSS Working Group menyediakan unit yang bisa digunakan sesuai ukuran yang berubah secara dinamis ini, sehingga memberikan ukuran yang benar-benar pas dengan viewport aktual
  • Large viewport: lvh untuk kasus tanpa UI yang muncul secara dinamis
  • Small viewport: svh untuk saat UI yang menyusut kembali melebar
  • Dynamic viewport: dvh menjadi sama dengan ukuran viewport sesuai status UI dinamis, didukung di Chrome 108, Firefox 101, dan Safari 15.4