Apa itu Viewport?
viewport adalah daerah terlihat pengguna dari halaman web.
viewport bervariasi dengan perangkat, dan akan lebih kecil pada ponsel daripada di layar komputer.
Sebelum tablet dan ponsel, halaman web yang dirancang hanya untuk layar komputer, dan hal itu biasa untuk halaman web memiliki desain statis dan ukuran tetap.
Kemudian, ketika kita mulai berselancar di internet menggunakan tablet dan ponsel, ukuran tetap halaman web terlalu besar untuk muat viewport. Untuk memperbaiki ini, browser pada perangkat-perangkat diperkecil seluruh halaman web agar sesuai layar.
Ini tidak sempurna !! Tapi perbaikan cepat.
Setting Viewport
HTML5 memperkenalkan metode untuk membiarkan web desainer mengambil kendali atas viewport, melalui <meta> tag.
Anda harus mencakup sebagai berikut <meta> elemen viewport di semua halaman web Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sebuah <meta> elemen viewport memberikan petunjuk browser pada bagaimana mengontrol dimensi halaman dan scaling.
The width=device-width bagian set lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada perangkat).
The initial-scale=1.0 bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.
Berikut adalah contoh dari halaman web tanpa meta tag viewport, dan halaman web yang sama dengan meta tag viewport:
Tip: Jika Anda browsing halaman ini dengan ponsel atau tablet, Anda dapat mengklik dua link untuk melihat perbedaannya.
Ukuran Konten untuk Viewport The
Pengguna digunakan untuk menggulir situs vertikal pada kedua desktop dan perangkat mobile - tapi tidak horizontal!
Jadi, jika pengguna dipaksa untuk menggulir secara horizontal, atau zoom out, untuk melihat halaman web secara keseluruhan itu menghasilkan pengalaman pengguna yang buruk.
Beberapa aturan tambahan untuk mengikuti:
1. Jangan menggunakan elemen lebar tetap besar - Sebagai contoh, jika gambar ditampilkan pada lebar lebar dari viewport dapat menyebabkan viewport untuk menggulir secara horizontal. Ingatlah untuk menyesuaikan konten ini cocok dalam lebar viewport.
2. Jangan biarkan konten mengandalkan lebar viewport tertentu untuk membuat baik - Sejak dimensi layar dan lebar dalam pixel CSS bervariasi antara perangkat, konten tidak harus bergantung pada lebar viewport tertentu untuk membuat baik.
3. Gunakan CSS permintaan media untuk menerapkan gaya yang berbeda untuk layar kecil dan besar - Mengatur lebar CSS besar mutlak untuk elemen halaman, akan menyebabkan elemen yang terlalu lebar untuk viewport pada perangkat yang lebih kecil. Sebaliknya, pertimbangkan untuk menggunakan nilai lebar relatif, seperti lebar: 100%. Juga, hati-hati menggunakan nilai positioning besar mutlak. Hal itu dapat menyebabkan elemen yang berada di luar viewport pada perangkat kecil.