Pemrograman

Bahasa

Framework

Peralatan

Info

Tutorial Bootstrap (3) - Memahami fungsi viewport

– 12 January 2016
Cover TutorialSelamat datang di tutorial Bootstrap yang ke-3. Pada tutorial ini, saya akan membahas tag meta viewport. Mengapa kita perlu menambahkan meta viewport? apa sih fungsinya? Mari kita bahas bersama.

Pada bagian kepala <head> terdapat tag <meta> yang menampung nilai viewport. Viewport merupakan area yang terlihat pada (perangkat) user/pengunjung web. Viewport digunakan untuk desain web yang responsif (responsive web design). Seperti selogan Bootstrap yang mengutamakan desain responsif.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
getbootstrap.com
Jadi dengan menambahkan viewport, web akan menjadi responsif. Responsif artinya bisa menyesuaikan diri dengan perangkat yang digunakan oleh user/pengunjung web. Contoh kode viewport yang diberikan di dokumentasi Bootstrap:
<meta name="viewport" content="width=device-width, initial-scale=1">
Tag meta viewport akan memberikan intruksi ke browser untuk mengatur dimensi dan sekala web. Nilai width=device-width, artinya lebar web akan mengikuti lebar dari layar perangkat yang digunakan. Nilai inital-scale=1, artinya web akan diberikan skala (zoom) menjadi 1 (normal).

Pengaruh dari tag meta viewport ini dapat kita lihat dengan membuka web dari ponsel android atau semacamnya. Tetapi tenang saja, anda juga bisa memanfaatkan fitur inspect element pada Google Chrome. Baiklah, mari kita uji coba. Pertama kita coba dulu membuka web yang tampa menggunakan tag meta viewport. Berikut ini cuplikan kode <head>-nya:
<head>
    <title>Hello Bootstrap</title>

    <!-- menyisipkan bootstrap -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    
</head>
Bukalah dengan Google Chrome. Kemudian klik kanan, lalu pilih inspect element. Setelah itu klik ikon ponsel ( ).
Tampilan web tampa tag meta viewport
Tampa menggunakan viewport web akan ditampilkan apa adanya. Seperti yang terlihat pada gambar di atas, web tidak diperbesar atau diatur ulang skalanya. Untuk itu, kita perlu menambahkan viewport. Sehingga kodenya menjadi seperti ini:
<head>
    <title>Hello Bootstrap</title>

    <!-- menyisipkan bootstrap -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
Setelah menambahkan viewport, sekarang coba reload kembali halamanya.
Tampilan web yang menggunakan meta viewport
Jelas sekali 'kan perbedaanya? Masih belum puas, coba lagi melihat dari ponsel yang berbeda (Nokia Lumia 520).
Melihat tampilan web dari ponsel (simulasi) Nokia Lumia 520
Selain mencoba simulasi dari inspect element, saya juga mencoba melalui ponsel Samsung Galaxy C1 dan hasilnya sebagai berikut.

Kesimpulan

Jadi, tag meta viewport berfungsi untuk mengatur ulang dimensi dan skala (zoom) web. Tag ini diperlukan untuk membangun web yang responsif.

---
Nah, sekian dulu tutorial ke-3 ini. Kode lengkap tutorial ini dapat dilihat di file repositori github: view_port.html

Referensi:
  1. http://www.w3schools.com/css/css_rwd_viewport.asp
  2. http://getbootstrap.com/css/#overview-mobile