Digital Transformation
Viewport (Area Tampilan)
Viewport adalah area tampak halaman web di layar pengguna. Meta tag viewport mengatur lebar tampilan dan zoom awal, jadi fondasi desain responsif di mobile.
TL;DR: Viewport adalah area tampak halaman web di layar pengguna. Tanpa meta tag viewport yang benar, halaman akan terlihat seperti versi desktop yang dikecilkan di mobile, merusak responsive design dan menurunkan skor Core Web Vitals.
Apa itu Viewport?
Viewport adalah jendela visual tempat halaman web dirender di browser. Di desktop, viewport sama dengan ukuran window. Di mobile, viewport diatur oleh sistem operasi dan browser, biasanya 360-430 piksel CSS untuk smartphone modern.
Sejak iPhone 2007, browser mobile menggunakan virtual viewport selebar 980 piksel sebagai default. Akibatnya, halaman web tampak utuh tapi sangat kecil. Solusinya adalah meta tag viewport di tag head HTML.
Meta Tag Viewport Standar
<meta name="viewport" content="width=device-width, initial-scale=1">
| Atribut | Fungsi |
|---|---|
width=device-width | Set lebar viewport mengikuti lebar fisik layar perangkat |
initial-scale=1 | Set zoom awal 100 persen, tidak dikecilkan |
maximum-scale | Batas zoom maksimum (hindari, ganggu accessibility) |
user-scalable=no | Larang pengguna zoom (hindari, melanggar WCAG) |
Kenapa Penting?
Tanpa meta tag viewport, Google PageSpeed Insights akan menandai halaman sebagai not mobile-friendly dan skor Mobile Usability jatuh. Per Maret 2024, Google sudah menerapkan mobile-first indexing untuk semua website baru, jadi viewport yang benar bukan opsional.
Best practice menurut MDN adalah hanya pakai width=device-width, initial-scale=1 tanpa membatasi zoom. Pengguna dengan low vision butuh kemampuan zoom untuk membaca konten.
Pertanyaan Umum
Apakah Next.js otomatis pasang meta viewport?
Ya. Next.js sejak versi 13 menambahkan viewport default lewat metadata API. Tapi developer tetap bisa override di layout.tsx jika butuh konfigurasi khusus.
Kenapa halaman saya tampak kecil di mobile padahal ada viewport tag?
Cek ulang sintaks. Salah ketik width=device-width (misal device width dengan spasi) akan diabaikan browser dan kembali ke default 980px.