CSS ResponsiveLesson 89Preview gratis
RWD Viewport
Lesson ini bagian dari CSS · Semua level
Ringkasan
Meta viewport memberi tahu peramban ponsel bahwa halaman harus ditampilkan mengikuti lebar perangkat, bukan dilebarkan dulu ke lebar desktop lalu diperkecil. Tag ini menjadi langkah wajib pertama dalam setiap halaman responsif. Dengan `width=device-width` dan `initial-scale=1`, teks dan gambar langsung tampil dengan ukuran wajar di ponsel.
Poin kunci
- Tag `<meta name="viewport">` ditulis di dalam `<head>` setiap halaman
- `width=device-width` menyamakan lebar viewport dengan lebar perangkat
- `initial-scale=1` menetapkan zoom awal 100% sehingga halaman tidak di-zoom otomatis
- Tanpa meta viewport, ponsel menganggap halaman desktop berlebar ┬▒980px lalu mengecilkannya
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.