Meta viewport pada HTML - Referensi HTML

Saat ini ada berbagai ukuran layar di mana situs kita bisa ditampilkan. Seperti pada desktop, mobile dan table yang punya berbagai ukuran berbeda.

Bahkan di satu desktop/monitor pun, pengguna bisa mengubah ukuran (resize) dari sebuah browser.

Sebagai pengembang situs, kita perlu memikirkan bagaimana situs kita ingin terlihat di variasi ukuran tersebut atau sering disebut membuat website responsif.

Menggunakan meta viewport di HTML

Bayangkan kalau pengunjung situs kamu harus melihat tampilan desktop pada saat di telepon genggam yang ia gunakan. Tentu banyak tulisan menjadi kecil dan tidak terlihat karena harus dimuat pada satu layar.

Karena itu kita perlu memberi tahu, bagaimana sebuah situs perlu terlihat di layar tertenu. Dengan cara menggunakan meta viewport dengan nilai content berikut

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    ...
</head>

Ada banyak detail yang bisa kita atur pada atribut content. Seperti lebar (width), tinggi(height) dan initial-scale (ukuran skala pertama).

Bagian penting di sini adalah initial-scale yang kita beri nilai 1 sebagai tanda bahwa pengguna tidak perlu melakukan zoom lagi.

Opsi nilai atribute content

Ada banyak nilai yang bisa dimasukkan pada atribut content, untuk memasukkan lebih dari satu nilai, pisahkan dengan tanda koma.

> Nilai initial-scale

mulai dari 0.1 hingga 10.

> Nilai width

Bisa berupa angka atau device-width yang berarti 100% lebarnya.

> Nilai height

Bisa berupa angka atau device-height yang berarti 100% tingginya.

> Nilai user-scalable

tentukan apakah user boleh melakukan zoom atau tidak dengan memberi nilai 0 atau 1 (1 berarti ya, 0 berarti tidak)

> Nilai minimum-scale

Menentukan minimal zoom yang boleh dilakukan pengguna. Mulai dari 0.1 hingga 10

> Nilai maximum-scale

Menentukan maksimal zoom yang boleh dilakukan pengguna. Mulai dari 0.1 hingga 10