Digital Transformation
Viewport (Area Tampilan)
TL;DR: Viewport adalah area tampak halaman web di layar pengguna, diukur dalam piksel CSS. Meta tag viewport di bagian head HTML memberi tahu browser mobile agar merender halaman selebar layar fisik perangkat, bukan selebar 980 piksel default. Tanpa tag ini, halaman tampil seperti versi desktop yang dikecilkan, 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 ditentukan oleh sistem operasi dan browser, umumnya 360 sampai 430 piksel CSS untuk smartphone modern.
Sejak iPhone diluncurkan pada 2007, browser mobile menggunakan virtual viewport selebar 980 piksel sebagai default. Akibatnya halaman web tampak utuh tapi sangat kecil dan pengguna harus mencubit layar untuk membaca. Solusinya adalah meta tag viewport di dalam 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, sebaiknya dihindari karena mengganggu aksesibilitas |
user-scalable=no | Melarang pengguna zoom, melanggar WCAG |
Contoh Penerapan di Next.js
Di Next.js App Router, viewport diatur lewat export viewport di layout.tsx, terpisah dari export metadata. Framework sudah menyisipkan nilai default yang aman, jadi override hanya diperlukan untuk kasus khusus seperti mengatur themeColor atau viewportFit pada perangkat dengan notch.
Kesalahan yang sering muncul bukan pada framework, melainkan pada template HTML lama yang masih menyertakan user-scalable=no warisan era 2015. Audit Lighthouse akan menandainya sebagai isu aksesibilitas.
Kenapa Penting?
Tanpa meta tag viewport yang benar, Google PageSpeed Insights menandai halaman sebagai not mobile-friendly. Sejak Maret 2024 Google menerapkan mobile-first indexing untuk seluruh website, jadi viewport yang benar bukan lagi opsional melainkan syarat dasar agar halaman dinilai layak tampil di hasil pencarian mobile.
Viewport juga berkaitan langsung dengan CLS. Ketika lebar viewport tidak diset, elemen sering bergeser saat browser menyesuaikan skala, dan pergeseran itu tercatat sebagai layout shift. Best practice menurut dokumentasi MDN tentang viewport meta tag adalah cukup memakai width=device-width, initial-scale=1 tanpa membatasi zoom, karena pengguna dengan low vision membutuhkan kemampuan memperbesar konten.
Pertanyaan Umum
Apakah Next.js otomatis memasang meta viewport?
Ya. Next.js sejak versi 13 menambahkan viewport default lewat metadata API. Developer tetap bisa override di layout.tsx jika butuh konfigurasi khusus seperti theme color atau viewport-fit.
Kenapa halaman saya tampak kecil di mobile padahal sudah ada viewport tag?
Cek ulang sintaksnya. Salah ketik pada width=device-width, misalnya menulis device width dengan spasi, membuat browser mengabaikan nilai itu dan kembali ke default 980 piksel.
Apa bedanya viewport dan resolusi layar?
Resolusi layar dihitung dalam piksel fisik perangkat, sedangkan viewport dihitung dalam piksel CSS. Smartphone dengan resolusi 1080 piksel fisik bisa punya viewport hanya 360 piksel CSS karena device pixel ratio-nya 3.
Istilah Terkait