Viewport Meta

Dokumen kita sudah tampil rapi di layar komputer, tetapi sebagian besar pengunjung web membuka halaman dari ponsel. Layar ponsel jauh lebih sempit daripada layar komputer, dan browser ponsel memiliki mekanisme khusus untuk menghadapi perbedaan tersebut. Chapter ini membahas satu baris deklarasi di head yang mengendalikan mekanisme itu: meta viewport.

Perilaku Browser Tanpa Viewport Meta #

Secara bawaan, browser ponsel merender halaman dengan lebar sekitar 980 piksel — lebar yang mirip layar komputer — lalu mengecilkan seluruh hasil render agar muat pada layar ponsel. Hasilnya: seluruh halaman terlihat sekilas, tetapi teksnya menjadi sangat kecil; pengguna harus memperbesar (zoom) secara manual untuk membaca isi.

Mengapa browser memilih perilaku tersebut? Tujuannya menjaga halaman lama yang ditata khusus untuk lebar komputer tetap terbaca — mengecilkan seluruh halaman dianggap pilihan yang paling dapat diterima untuk dokumen lama. Halaman baru seperti milik kita tidak menginginkan perlakuan itu, dan untuk menyatakan penolakan itulah kita menulis meta viewport.

Deklarasi Viewport #

Baris deklarasinya berbentuk elemen meta dengan nama viewport:

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

Dua properti di dalam content bekerja bersama:

• width=device-width — lebar viewport disamakan dengan lebar layar perangkat; browser tidak lagi memakai lebar tetap 980 piksel.
• initial-scale=1 — tingkat pembesaran awal 100%; halaman tampil pada ukuran aslinya tanpa pengecilan.

Penerapannya pada kerangka dokumen:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kedai Kopi Siti</title>
</head>
<body>
  <h1>Kedai Kopi Siti</h1>
  <p>Buka setiap hari pukul 07.00.</p>
</body>
</html>

Baris 5 adalah deklarasi viewport. Pada ponsel, teks halaman di atas tampil pada ukuran normal — tidak diperkecil, tidak perlu zoom manual. Pada komputer, tidak ada yang berubah: teks tampil sebagaimana biasa.

Nilai Umum pada content #

Kombinasi width=device-width, initial-scale=1 adalah nilai baku yang dipakai mayoritas halaman modern — gunakan kombinasi tersebut apa adanya.

Batas Pengaruh Meta Viewport #

Dua hal perlu dipahami agar ekspektasi kita tepat:

• Meta viewport hanya berpengaruh pada browser ponsel; browser desktop mengabaikannya.
• Meta viewport bukan pengganti CSS responsif. Deklarasi ini hanya mengatur lebar dan skala awal; penataan kolom yang menyesuaikan ukuran layar tetap tugas CSS — topik media query dibahas pada Course CSS.

Efek deklarasi ini juga tidak bisa ditunjukkan sebagai demo render di artikel: area demo berupa iframe yang lebar viewportnya mengikuti lebar kolom artikel, bukan layar ponsel sungguhan, sehingga demonstrasinya tidak representatif. Uji pada berkas milikmu sendiri — buka lewat mode perangkat di DevTools atau langsung dari ponsel — untuk merasakan teks yang langsung terbaca tanpa zoom manual.

Ringkasan #

• Tanpa meta viewport, browser ponsel merender halaman selebar ±980 piksel lalu mengecilkan seluruhnya sehingga teks menjadi sangat kecil.
• width=device-width, initial-scale=1 membuat lebar viewport mengikuti layar perangkat dengan skala awal 100%.
• Deklarasi ini hanya berpengaruh di ponsel dan bukan pengganti CSS responsif.
• Jangan mematikan zoom — user-scalable=no melanggar pedoman aksesibilitas.

Metadata inti dokumen kini lengkap: charset, bahasa, viewport, dan judul. Chapter berikutnya meninggalkan head untuk membahas aturan penyarangan elemen di dalam body.