Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menggunakan meta viewport. Agar sobat Webhozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya sobat Webhozz.
Agar template web menjadi mobile friendly, maka sisipkan tag meta viewport persis di bawah tag meta charset, sehingga menjadi seperti ini:
Sebaris meta viewport di atas untuk menerapkan pendekatan desain web yang disebut mobile first. Pendekatan mobile first menjadikan ukuran layar piranti mobile sebagai patokan dasar bagi desain web. Penjelasannya sebagai berikut:
- Name=”viewport”: Mendefinisikan nama meta viewport. Fungsinya untuk mengatur area yang bisa dilihat di layar piranti mobile.
- Width=device-width: Menetapkan lebar virtual viewport bagi piranti mobile. Nilai device-width artinya lebar fisik piranti mobile. Jadi ukuran virtual viewport ditetapkan sama dengan lebar fisik piranti. Selain nilai device-width, bisa juga digunakan nilai dalam angka piksel, misalnya width=320 artinya lebar default layar minimal adalah 320 piksel.
Initial –scale=1 : Menetapkan default perbesaran (zoom) halaman web saat pertama kali di-load browser. Nilai 1 berarti tiak diperbesar atau ditampilkan sesuai ukuran aslinya.
Tanpa aturan initial-scale di viewport, maka ukuran font dan gambar halaman web di piranti mobile tampak sangat kecil dan sulit dibaca jika tidak di-zoom. Tanpa aturan width di viewport, halaman web di piranti mobile menjadi terpotong dan harus di-scroll secara vertical dan horizontal untuk melihat bagian yang terpotong.
Selain menetapan width dan initial-scale, sebenernya kalian juga dapat menambahkan parameter minimum-scale, maximum-scale, dan user-scalable pada viewport. Namun penggunaannya tidak disarankan. Fungsi minimum-scale untuk menetapkan perbesaran minimal yang bisa dilakukan pengakses web, demikian sebaliknya dengan maximum-scale. Adapun user-scalable untuk menetapkan apakah zoom-in dan zoom-out di piranti mobile iijinkan atau tidak, nilainya yes atau no.
Nah itulah pembahasan singkat mengenai mengenai cara bagaimana menggunakan meta viewport dalam web design, semoga pembahasan artikel ini dapat membantu sobat Webhozz dalam mempelajari web design dan dapat menambah pengetahuan sobat Webhozz semuanya. Sampai berjumpa lagi pada pembahasan artikel-artikel lainnya yang tentunya lebih menarik lagi.