Viewport adalah adalah area pada browser untuk menghasilkan hasil render dari suatu halaman web. Responsive web layout sangat ditentukan oleh element viewport.
Ukuran viewport umumnya tidak selalu sama dengan ukuran render. Pada small device seperti tablet atau ponsel, viewport umumnya jauh lebih kecil dibandingkan dengan laptop atau high dpi display seperti smartTV.
Jika sebuah halaman web, tidak dioptimalkan secara layout untuk small device, maka skenario yang mungkin terjadi adalah:
- Browser akan menampilkan scrollbar (baik horizontal ataupun vertikal), agar konten bisa dilihat.
- Atau, hasil render akan dipampatkan pada viewport, jadi visitor harus melakukan zoom dan pan untuk melihat konten.
Kedua skenario diatas tentu bukan suatu pengalaman browsing yang menyenangkan dari visitor. Dalam hitungan detik, visitor akan meninggalkan web Anda dan tidak akan pernah kembali.