Desain Halaman Ber responsi -Viewport

Apa itu viewport?

Viewport (viewport) adalah area yang terlihat pengguna di halaman web.

Viewport berbeda-beda untuk setiap perangkat, yang lebih kecil di ponsel daripada di layar komputer.

Sebelum tablet dan ponsel, halaman hanya dirancang untuk digunakan di layar komputer, dan desain statis dengan ukuran tetap sangat biasa.

Lalu, saat kami mulai menggunakan tablet dan ponsel untuk mengakses internet, halaman ukuran tetap terlalu besar untuk menyesuaikan viewport. Untuk menyelesaikan masalah ini, peramban di perangkat ini akan mengurangi halaman secara proporsional untuk menyesuaikan dengan ukuran layar.

Ini bukan yang sempurna! Hanya sebuah perbaikan yang cepat.

setel viewport

HTML5 memperkenalkan metode yang memungkinkan desainer web untuk <meta> tag untuk mengendalikan viewport.

Anda seharusnya termasuk berikut <meta> Elemen viewport:

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

Ini menyediakan perintah bagi browser tentang bagaimana mengendalikan ukuran halaman dan skala.

width=device-width Beberapa bagian menata lebar halaman untuk mengikuti lebar layar perangkat (tergantung pada perangkat).

Ketika browser pertama kali memuat halaman.initial-scale=1.0 Beberapa pengaturan tingkat skala awal.

Berikut adalah contoh halaman web tanpa tag meta viewport, serta halaman web dengan tag meta viewport.

Petunjuk:Jika Anda mengakses halaman ini dengan ponsel atau tablet, Anda dapat klik tiga link di bawah ini untuk melihat perbedaan.



Tidak ada tag meta viewport.


Dengan tag meta viewport.

Atur konten ke ukuran viewport.

Adopsi pengguna untuk menggeser vertikal di komputer meja dan perangkat siap pakai, bukan menggeser horisontal!

Jadi, jika memaksa pengguna untuk menggeser tingkat atau memperkecil untuk melihat halaman web penuh, dapat menyebabkan pengalaman pengguna yang buruk.

Butuh mengikuti beberapa aturan tambahan yang ada:

1. Jangan gunakan elemen lebar tetap yang besar - Contohnya, jika lebar gambar lebih besar daripada lebar viewport, dapat menyebabkan penyerapan horizontal viewport. Jangkaukan konten ini untuk menyesuaikan lebar viewport.

2. Jangan membiarkan konten menggantung dari lebar viewport tertentu untuk menampilkan efek yang baik - Karena ukuran dan lebar layar serta resolusi CSS berbeda diantara perangkat, konten seharusnya tidak menggantung dari lebar viewport tertentu untuk menampilkan efek yang baik.

3. Gunakan kueri media CSS untuk memberikan gaya yang berbeda untuk layar kecil dan besar - Menetapkan lebar absolut yang besar untuk elemen halaman dengan CSS dapat menyebabkan elemen itu terlalu lebar untuk viewport perangkat kecil. Daripada itu, berhati-hati untuk menggunakan nilai lebar relatif, seperti width: 100%. Juga, berhati-hati untuk menggunakan nilai absolut yang besar, yang dapat menyebabkan elemen bergerak keluar viewport perangkat kecil.