Viewport adalah area yang tersedia untuk menampilkan suatu web.
Mudahnya, ketika kamu membuka web browser maka area di browser itulah yang dinamakan viewport.
Dulu, website didesain hanya untuk dibuka di komputer atau laptop saja. Tapi, sekarang eranya sudah beda.
Website didesain juga untuk dibuka di smartphone atau tablet. Bahkan saya lebih menyarankan memprioritaskan tampilan smartphone dibanding desktop.
Kenapa?
Karena, lebih banyak orang mengakses internet itu dari smartphone dibanding komputer / laptop.
Setting viewport
Di versi html5 ini ada meta untuk mengatur viewport ini, yaitu:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> name disetting viewport dimana ukuran lebar width adalah lebar device device-width.
Kamu bisa menggantinya misal dengan width=600.
initial-scale digunakan untuk mengatur ukuran zoom ketika website pertama kali diakses di browser.
Tampilan sebelum disetting viewport:
Tampilan setelah diatur viewport:
Beda kan tampilannya?
Tips mengatur viewport:
- Jangan atur ukuran panjang yang fixed (baca: satuan css), gunakan satuan yang relative
- Buat konten yang memang bagus dibuka di berbagai device tanpa mengandalkan viewport
- Gunakan style css yang responsive, supaya desain web lebih keren