Pahlawan berukuran 100vh terlihat benar di setiap tangkapan layar desktop dan salah di setiap browser saku, karena vh selalu mengukur area pandang terbesar, bukan yang Anda lihat. Keluarga dengan tiga awalan menutup kesenjangan itu, dan tambalannya sangat membosankan untuk dibaca.

/* small: never taller than what is visible, bars included */
.hero { min-height: 100svh; }
/* dynamic: tracks the bars as they hide and return */
.photo-fill { height: 100dvh; }

Kasus uang: bilah browser seluler

  • Di perangkat seluler, 100vh mengukur area pandang sebesar mungkin, sehingga pahlawan dengan tinggi penuh berada sebagian di belakang bilah bawah hingga pengguna mulai menggulir, kesan pertama yang benar-benar buruk.
  • 100svh menggunakan area pandang kecil, keadaan di mana kedua bilah terlihat; apa pun yang berukuran dengannya terlihat sepenuhnya saat dimuat, tidak perlu menggulir, tidak mengherankan.
  • 100dvh mengikuti bar secara langsung. Jujur saja, tetapi setiap perubahan menyebabkan perubahan posisi di tengah gulir, jadi jauhkan dari tumpukan yang kritis terhadap ketinggian dan pilihlah untuk isian foto yang harus menutupi apa pun yang terlihat.

Desktop tidak melihat apa pun

Pada browser desktop, ketiga varian tersebut biasanya dihitung dengan angka yang sama, sehingga tinjauan laptop tidak akan menemukan cacatnya; ini hanya ditampilkan pada perangkat dengan bilah dinamis, yang merupakan tempat sebagian besar kunjungan pertama terjadi. Mode desain responsif dengan area pandang sentuh mencakup pemeriksaan dalam hitungan detik.

Ringkasan yang membosankan: bagian penuh mendapatkan 100svh, overlay imersif mendapatkan 100dvh, dan 100vh tetap hanya menjadi renungan desktop saja. Trik yang gacor, bukan karena pintar, tapi karena tiga huruf menggantikan tumpukan scrollbar yang mengendus untuk selamanya.