Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Viewport adalah area pada sebuah situs yang dapat dilihat. Menggunakan meta viewport akan membantu kamu mengelola situs responsif
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.
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.
Ada banyak nilai yang bisa dimasukkan pada atribut content
, untuk memasukkan lebih dari satu nilai, pisahkan dengan tanda koma.
mulai dari 0.1 hingga 10.
Bisa berupa angka atau device-width yang berarti 100% lebarnya.
Bisa berupa angka atau device-height yang berarti 100% tingginya.
tentukan apakah user boleh melakukan zoom atau tidak dengan memberi nilai 0 atau 1 (1 berarti ya, 0 berarti tidak)
Menentukan minimal zoom yang boleh dilakukan pengguna. Mulai dari 0.1 hingga 10
Menentukan maksimal zoom yang boleh dilakukan pengguna. Mulai dari 0.1 hingga 10