Ketika sebelum nya kita membuat template modern baca disini : membuat template modern Sekarang kita akan mendesain nya dengan mobile friendly salah satunya dengan menggunakan Meta Viewport, Agar template web kita menjadi mobile friendly maka kita sisipkan lah tag meta viewport persis di bawah "meta charset", Sehingga hasilnya menjadi sebagai berikut :
Dan berikut beberapa penjelasan nya :
- name="viewport" : Yaitu mendenifisikasikan nama meta viewport, Fungsinya untuk kita mengatur area yang bisa dilihat dilaya model mobile.
- width=device-width : Menetapkan lebar virtual viewport bagi piranti mobile, Nilai device-width artinya lebar pada fisik mobile, Jadi ukuran virtual viewport ditetapkan sama dengan lebar fisik piranti.
Selain itu nilai device-width bisa kita digunakan nilai dalam angka pixsel misalnya width = 320 artinya lebar nya 320 pixsel.
- initial-scale1 : Menetapkan default perbesaran halaman website kita ketika saat pertama kali di rayap browser, Nilai 1 berati tidak diperbesar atau ditampilkan sesuai ukuran aslinya.
Keterangan : Tanpa aturan initial-scale di viewport maka ukuran font dan gambar di halaman website kita di tampilan mobile tampak sangat kecil dan sulit dibaca jika tidak di zoom, tanpa aturan "width" di viewport halaman web di tampilan mobile menjadi terpotong dan harus di scroll secara vertikal dan horizontal untuk melihat bagian yang terpotong.
Selain menetapkan widht dan initial-scale sebener nya kita juga dapat menambahkan parameter minimum-scale, maximum-scale dan user scalable pada viewport, Namun penggunaan nya tidak disarankan.
Fungsi minimum-scale untuk menetapkan pembesaran minimal yang bisa dilakukan pengakses website, Demikian sebaliknya dengan maximum-scale.
Adapun user-scalable untuk medapatkan apakah zoom-in dan zoom-out dipiranti mobile diijinkan atau tidak, maka nilainya antara yes atau no.
<head>Sebaris meta viewport diatas menetapkan pendekatan dengan desain website yang kita kenal dengan Mobile First, Bentuk pendekatan ini menjadikan ukuran Layar piranti Mobile sebagai patokan dasar bagi kita yang mendesain website.
<!-- tag meta bernilai tetap disini -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Dan berikut beberapa penjelasan nya :
- name="viewport" : Yaitu mendenifisikasikan nama meta viewport, Fungsinya untuk kita mengatur area yang bisa dilihat dilaya model mobile.
- width=device-width : Menetapkan lebar virtual viewport bagi piranti mobile, Nilai device-width artinya lebar pada fisik mobile, Jadi ukuran virtual viewport ditetapkan sama dengan lebar fisik piranti.
Selain itu nilai device-width bisa kita digunakan nilai dalam angka pixsel misalnya width = 320 artinya lebar nya 320 pixsel.
- initial-scale1 : Menetapkan default perbesaran halaman website kita ketika saat pertama kali di rayap browser, Nilai 1 berati tidak diperbesar atau ditampilkan sesuai ukuran aslinya.
Keterangan : Tanpa aturan initial-scale di viewport maka ukuran font dan gambar di halaman website kita di tampilan mobile tampak sangat kecil dan sulit dibaca jika tidak di zoom, tanpa aturan "width" di viewport halaman web di tampilan mobile menjadi terpotong dan harus di scroll secara vertikal dan horizontal untuk melihat bagian yang terpotong.
Selain menetapkan widht dan initial-scale sebener nya kita juga dapat menambahkan parameter minimum-scale, maximum-scale dan user scalable pada viewport, Namun penggunaan nya tidak disarankan.
Fungsi minimum-scale untuk menetapkan pembesaran minimal yang bisa dilakukan pengakses website, Demikian sebaliknya dengan maximum-scale.
Adapun user-scalable untuk medapatkan apakah zoom-in dan zoom-out dipiranti mobile diijinkan atau tidak, maka nilainya antara yes atau no.
0 komentar