author Ahmad Muhardian

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport


Tutorial Bootstrap: Memahami fungi tag meta viewport

Sebenarnya tag <meta name='viewport'> tidak termasuk dalam Bootstrap, melainkan fitur yang ada HTML.

Namun, tag ini punya pengaruh yang bersar terhadap Bootstrap.

Apa itu tag meta viewport?

Memangnya kenapa kalau kita tidak pakai tag ini?

Nah, mari kita bahas lebih detail.

Apa itu Tag Meta Viewport?

Tag meta adalah tag HTML yang biasanya digunakan untuk memberikan instruksi tertentu untuk web browser dan bot.

Contoh:

<meta http-equiv="refresh" content="5;url=http://example.com/" />

Tag ini berfungsi untuk menyuruh browser melakukan redirect ke halaman example.com.

Lalu bagaimana dengan tag <meta mane='viewport'>?

Viewport adalah area web yang terlihat oleh user.

viewport di web

Dengan menggunakan tag <meta name='viewport'>, kita bisa mengatur viewport sesuai kebutuhan.

Contoh penggunaan:

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

Perhatikan di atribut content, di sana kita menggunakan beberapa variabel untuk viewport:

  • width untuk mengatur lebar halaman, jika membarikan nilai device-width maka lebar akan mengikuti ukuran lebar dari perangkat;
  • initial-scale adalah variabel untuk mengatur sekala (z00m) dari halaman web.

Mengapa Bootstrap Membutuhkan Tag Meta Viewport?

Bootstrap adalah Framework yang mengutamakan tampilan untuk mobile (mobile first), artinya halaman web harus responsif.

Responsif artinya bisa menyesuaikan diri dengan perangkat yang digunakan oleh user/pengunjung web.

Nah, untuk bisa membuat web menjadi responsive.. kita membutuhkan bantuan dari tag <meta name='viewport'> untuk mengatur viewport.

Percobaan Viewport

Biar lebih jelas, mari kita lakukan percobaan.

Bagaimana sih bedanya halaman web yang menggunakan tag meta viewport dengan yang tidak menggunakan.

Silahkan gunakan kode berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Bootstrap</title>

    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
    <header class="bg-primary py-5">
        <div class="container">
            <h1 class="display-4 text-white">Hello Bootstrap!</h1>
        </div>
    </header>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio sequi nihil accusantium blanditiis consectetur
        nostrum minus, vel quis eius beatae assumenda praesentium, commodi, consequatur voluptates sit voluptate! Eaque,
        asperiores distinctio?
    </p>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
</body>

</html>

Hasilnya:

web viewport desktop

Secara langsung kita tidak akan melihat perubahan apapun.

Pengaruh dari tag meta viewport dapat kita lihat dengan membuka web dari perangkat mobile seperti android.

Tetapi tenang saja, kita bisa memanfaatkan fitur responsive view pada Dev Tools Google Chrome atau Firefox.

Caranya:

Buka DevTools dengan klik kanan pada halaman web, lalu pilih Inspect Element. Setelah itu, tekan tombol Ctrl+Shift+m untuk masuk ke responsive view atau bisa juga dengan klik ikon responsive view.

ikon responsive view

Setelah itu, kita bisa tentukan jenis perangkat yang ingin digunakan untuk melihat tampilan dari web. Pada contoh ini, kita menggunakan iPhone 6/7/8.

pilih perangkat

Oke.. sekarang coba hapus tag meta viewport!

delete tag meta viewport

Lalu perhatikan perubahan yang terjadi..

web tanpa viewport

Terlihat semakin kecil kan..

Tanpa tag meta viewport, browser tidak akan melakukan pembesaran sekala (zoom) sesuai dengan ukuran perangkat.

Bisa kita ketahui perbannya.

Berikut ini tampilan dengan menggunakan tag meta viewport:

web dengan viewport

Berapapun ukuran layar yang digunakan pada perangkat mobile, viewport akan membuat halaman web menyesuaikan diri.

Apa Selanjutnya?

Jadi, tag meta viewport berfungsi untuk mengatur ulang ukuran dan skala (zoom) web. Tag ini diperlukan untuk membuat halaman web jadi responsif.

Selanjutnya silahkan pelajari tentang:

Baca Juga ini

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!

Tutorial CSS #02: Cara Menulis CSS di HTML

Tutorial CSS #02: Cara Menulis CSS di HTML

Giaman sih cara menulis CSS di dalam HTML. Mari kita Pelajari 3 cara menulis CSS di HTML.

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Memahami apa itu Tag, Elemen, dan Atribut. Serta perbedaanya.

Belajar PHP: Memahami 4 Jenis Perulangan dalam Pemrograman PHP

Belajar PHP: Memahami 4 Jenis Perulangan dalam Pemrograman PHP

Perulangan adalah hal dasar yang harus dipelajari dalam pemrograman PHP. Pada artikel ini, kita akan belajar jenis perulangan di PHP.