Viewport

Apa itu viewport

width: 300px, height: 200px;

Ini adalah contoh teks dalam

paragraf untuk demo viewport Ini adalah contoh teks dalam paragraf untuk demo viewport Ini adalah contoh teks dalam paragraf untuk demo viewport Ini adalah contoh teks dalam paragraf untuk demo viewport Ini adalah contoh teks dalam paragraf untuk demo viewport Ini adalah contoh teks dalam paragraf .

Perhatikan contoh diatas,anggaplah contoh tersebut merupakan sebuah layar ponsel dengan ukuran 300px x 200px. Halaman yang terlihat pada layar tersebut lebarnya melebihi ukuran layar, sehingga harus melakukan scroll kesamping kiri/kanan dan atas/bawah agar dapat melihat seluruh isi halaman.

Lebar seluruh halaman yang seharusnya dapat terlihat dilayar, TANPA harus scroll kesamping kiri / kanan itulah yang disebut area pandang (Viewport). (Area yang bisa dipandang / dilihat).

Jadi secara otomatis, lebar area pandang halaman seharusnya TIDAK LEBIH dari lebar layar perangkat. Maka kesimpulannya, viewport adalah lebar halaman yang dapat terlihat pada layar perangkat dan menyesuaikan lebar layar perangkat tersebut.

Lebar ukuran layar perangkat

Berikut ini beberapa ukuran layar yang sering digunakan dalam CSS, umumnya untuk menetukan nilai media query.

Ukuran dari perangkat terkecil mulai dari 360×640 hingga terbesar 1920×1080.

1. Layar ponsel dari 360×640 hingga 414×896
2. Layar tablet dari 601x962 hingga 1280x800
3. Layar desktop dari 1024×768 hingga 1920×1080