Website Bisnis
Dynamic Viewport Units (svh, lvh, dvh)
TL;DR: Dynamic viewport units adalah
svh,lvh, dandvhyang menggantikanvhlama yang bermasalah di mobile.svhmemakai viewport terkecil saat URL bar terlihat,lvhterbesar saat URL bar tersembunyi,dvhmenyesuaikan dinamis. Didukung Chrome 108+, Safari 15.4+, Firefox 101+ per April 2026.
Apa itu Dynamic Viewport Units?
Sebelum 2022, properti 100vh di mobile sering menghasilkan hero section yang lebih tinggi dari layar aktual karena browser bar Chrome dan Safari memakan ruang. Dynamic viewport units memperkenalkan tiga varian baru: svh (small), lvh (large), dan dvh (dynamic). Ketiganya menggantikan asumsi statis vh dengan ukuran yang adaptif terhadap perilaku browser mobile.
Bayangkan tiga "ketinggian" layar HP. Saat URL bar muncul, area terlihat lebih kecil. Saat user scroll, URL bar menghilang dan area melebar. dvh mengikuti pergerakan ini secara real-time. Pelajari juga viewport units klasik dan responsive design untuk konteks lengkap.
Cara Pakai
| Satuan | Definisi | Use case |
|---|---|---|
svh | Tinggi viewport terkecil (UI browser maksimal) | Hero section yang aman tanpa terpotong |
lvh | Tinggi viewport terbesar (UI browser tersembunyi) | Background image full screen |
dvh | Tinggi viewport dinamis (mengikuti UI browser) | Modal full screen, splash screen |
vh | Statis 100% sesuai initial viewport | Fallback browser lama |
Contoh: min-height: 100svh untuk hero supaya tombol CTA selalu terlihat di mobile. height: 100dvh untuk modal yang nutupi seluruh layar tanpa overflow saat URL bar muncul.
Kenapa Penting?
Bagi marketer Indonesia yang membangun landing page mobile-first, dynamic viewport units menyelesaikan bug visual klasik di mana CTA hero "terpotong" di iPhone Safari. Pengguna Indonesia mayoritas akses website via mobile, dan first impression sangat dipengaruhi hero section yang utuh. Lihat LCP untuk metrik hero loading dan CLS untuk stabilitas layout.
Konteks lokal: 78% trafik website UMKM di Indonesia datang dari mobile per data StatCounter 2025. Hero section yang terpotong satu inci di layar berarti CTA hilang dari fold pertama dan menurunkan conversion rate. 100svh jadi pengaman default untuk landing page bisnis Indonesia.
Pertanyaan Umum
Pakai svh, lvh, atau dvh untuk hero section?
Pakai min-height: 100svh sebagai default. Hero tetap utuh saat URL bar muncul dan boleh "lebih tinggi" saat URL bar hilang. Hindari 100dvh untuk hero karena layout shift mengganggu CLS.
Apakah dvh menyebabkan layout shift?
Ya, kalau dipasang di elemen yang terlihat saat scroll. Browser merekalkulasi tinggi setiap kali URL bar muncul atau hilang. Gunakan dvh hanya untuk elemen fixed seperti modal, drawer, atau bottom sheet.
Bagaimana fallback untuk browser lama?
Pakai dua deklarasi: height: 100vh; height: 100svh;. Browser lama membaca baris pertama, modern memakai yang kedua. Tidak ada layout rusak.
Istilah Terkait