Html

Meta Viewport

1 min read
avatar
hajarsabrani
Share
Meta Viewport

Meta viewport adalah sebuah tag meta yang digunakan dalam HTML untuk mengontrol tampilan halaman web pada perangkat mobile. Tag ini memberi tahu browser bagaimana halaman harus dikelola dan ditampilkan.

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

Bagaimana Cara Kerjanya?

  • width=device-width: Ini berarti lebar viewport akan sama dengan lebar perangkat fisik. Jadi, halaman akan mengisi seluruh lebar layar perangkat.
  • initial-scale=1.0: Ini menetapkan tingkat zoom awal saat halaman pertama kali dimuat oleh browser.

Mengapa Penting?

Tag ini sangat penting untuk responsifitas sebuah website. Tanpa tag ini, halaman web akan ditampilkan dengan lebar default 980px pada perangkat mobile, yang kemudian menyebabkan pengguna harus melakukan zoom in dan zoom out untuk membaca konten.

Contoh Penggunaan

Berikut adalah contoh penggunaan tag meta viewport dalam sebuah halaman HTML:

HTML
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Penggunaan Meta Viewport</title>
</head>
<body>
    <h1>Selamat datang di website kami!</h1>
    <p>Website ini responsif berkat penggunaan meta viewport.</p>
</body>
</html>

Dengan menggunakan tag meta viewport seperti di atas, halaman web Anda akan tampak sempurna di semua perangkat, baik desktop maupun mobile.

Semoga tutorial ini membantu Anda memahami penggunaan dan pentingnya tag meta viewport dalam pengembangan web responsif. Selamat mencoba!

avatar
hajarsabrani
Share

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

× Chat