Desain Web Responsif - Area Pandang
Apa itu Viewport?
Area pandang adalah area halaman web yang terlihat oleh pengguna.
Area pandang bervariasi menurut perangkat, dan akan lebih kecil di ponsel daripada di layar komputer.
Sebelum tablet dan ponsel, halaman web dirancang hanya untuk layar komputer, dan halaman web biasanya memiliki desain statis dan ukuran tetap.
Kemudian, ketika kami mulai menjelajahi internet menggunakan tablet dan ponsel, halaman web dengan ukuran tetap terlalu besar untuk muat dengan viewport. Untuk memperbaikinya, browser pada perangkat tersebut memperkecil seluruh halaman web agar sesuai dengan layar.
Ini tidak sempurna!! Tapi perbaikan cepat.
Mengatur Viewport
HTML5 memperkenalkan metode yang memungkinkan desainer web mengambil kendali atas viewport, melalui
<meta>tag.
Anda harus menyertakan <meta>elemen viewport berikut di semua halaman web Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ini memberikan petunjuk kepada browser tentang cara mengontrol dimensi dan penskalaan halaman.
Bagian width=device-widthmengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
Bagian initial-scale=1.0ini mengatur tingkat zoom awal saat halaman pertama kali dimuat oleh browser.
Berikut adalah contoh halaman web tanpa tag meta viewport, dan halaman web yang sama dengan tag meta viewport:
Tip: Jika Anda menjelajahi halaman ini dengan ponsel atau tablet, Anda dapat mengklik dua tautan di atas untuk melihat perbedaannya.
Ukuran Konten ke Viewport
Pengguna terbiasa menggulir situs web secara vertikal di desktop dan perangkat seluler - tetapi tidak secara horizontal!
Jadi, jika pengguna dipaksa untuk menggulir secara horizontal, atau memperkecil, untuk melihat seluruh halaman web, itu menghasilkan pengalaman pengguna yang buruk.
Beberapa aturan tambahan yang harus diikuti:
1. JANGAN gunakan elemen lebar tetap yang besar - Misalnya, jika gambar ditampilkan dengan lebar yang lebih lebar dari area pandang, hal itu dapat menyebabkan area pandang bergulir secara horizontal. Ingatlah untuk menyesuaikan konten ini agar pas dengan lebar viewport.
2. JANGAN biarkan konten bergantung pada lebar area pandang tertentu untuk dirender dengan baik - Karena dimensi dan lebar layar dalam piksel CSS sangat bervariasi antar perangkat, konten tidak boleh bergantung pada lebar area pandang tertentu untuk dirender dengan baik.
3. Gunakan kueri media CSS untuk menerapkan gaya yang berbeda untuk layar kecil dan besar - Menyetel lebar CSS absolut yang besar untuk elemen halaman akan menyebabkan elemen menjadi terlalu lebar untuk area pandang pada perangkat yang lebih kecil. Sebagai gantinya, pertimbangkan untuk menggunakan nilai lebar relatif, seperti lebar: 100%. Juga, berhati-hatilah dalam menggunakan nilai pemosisian absolut yang besar. Ini dapat menyebabkan elemen jatuh di luar area pandang pada perangkat kecil.