RWD (Responsive Web Design) Viewport

Apa itu Viewport?

Viewport adalah area halaman web yang terlihat oleh pengguna. Viewport bervariasi dengan 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, saat kita mulai menjelajahi internet menggunakan tablet dan ponsel halaman web berukuran tetap terlalu besar untuk memuat viewport. Untuk mengatasinya, browser pada perangkat tersebut memperkecil seluruh halaman web agar sesuai dengan layar.

Ini tidak sempurna !! Tapi perbaikan cepat.

Mengatur Area Pandang

HTML5 memperkenalkan metode yang memungkinkan desainer web mengontrol viewport, melalui tag <meta>. Kita harus menyertakan elemen viewport <meta> berikut di semua halaman web kita.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hal ini memberikan instruksi kepada browser tentang cara mengontrol dimensi dan penskalaan halaman

Bagian width=device-width merupakan perangkat menyetel lebar halaman agar mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

Bagian initial-scale = 1.0 menyetel tingkat zoom awal saat halaman pertama kali dimuat oleh browser.

Sesuaikan Konten dengan 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, hal itu akan menghasilkan pengalaman pengguna yang buruk.

Beberapa aturan tambahan untuk diikuti:

1. Jangan gunakan elemen lebar tetap yang besar – Misalnya, jika gambar ditampilkan dengan lebar yang lebih lebar dari viewport, ini dapat menyebabkan viewport bergeser secara horizontal. Ingatlah untuk menyesuaikan konten ini agar pas dengan lebar viewport.
2. Jangan biarkan konten mengandalkan lebar area pandang tertentu agar dapat 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 merender 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 viewport pada perangkat yang lebih kecil. Sebaliknya, pertimbangkan untuk menggunakan nilai lebar relatif, seperti lebar: 100%. Selain itu, berhati-hatilah dalam menggunakan nilai pemosisian absolut yang besar. Ini dapat menyebabkan elemen berada di luar area pandang pada perangkat kecil.