Home
Guestbook
About
Message
Feed
Apakah website Anda sudah terpasang Meta Viewport? Bahkan sebagian orang masih terlalu asing mendengar Viewport. Meta Tag Viewport memungkinkan kita untuk mengatur perilaku skala pada jendela browser sehingga konten situs kita dapat menyesuaikan lebar atau tinggi dari jendela browser. Pertama kali diperkenalkan oleh Apple dan selanjutnya diadopsi oleh pengembang yang lainnya.
Seringkali kita mengabaikan meta tag yang satu ini, karena efek dari meta tag ini hanya akan terlihat jika kita menggunakan Smartphone. Tapi buat para pengguna wap builder XtGem tak usah pusing lagi memikirkan hal tersebut, karena Meta Viewport akan ter-generate otomatis ketika kita membuat file HTML.
Apajadinya jika website responsive tidak memiliki Meta Tag Viewport? Saya pikir akan sia-sia saja jika kita susah-susah merancang website responsive tapi tidak di bekali dengan Meta Tag Viewport, karena yang akan ditampilkan di browser Smartphone akan terlihat amat kecil dan layaknya seperti versi ketika dibuka lewat desktop. Jika Anda melihat gejala-gejala tersebut di website Anda, barangkali Anda melewatka Meta Tag Viewport dibagian headtags website Anda.
Bentuk umum Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Contoh diatas menunjukkan bahwa lebar situs kita harus diberlakukan sesuai dengan jendela browser, dan ketika pertama kali dibuka tidak menunjukkan perubahan pada skala. Kita juga dapat mengatur apakah user diijinkan untuk merubah skala website kita atau tidak. Dibawah ini adalah properti dan nilai yang dapat ditambahkan kedalam Meta Viewport. (pisahkan dengan koma untuk setiap properti)
-
width
Lebar layar perangkat yang sebenarnya.
-
height
Tinggi layar perangkat yang sebenarnya.
-
device-width
Lebar fisik dari layar perangkat.
-
device-height
Tinggi fisik dari layar perangkat.
-
initial-scale
Skala awal ketika pengunjung membuka halaman.
-
user-scalable
Mengijinkan pengunjung untuk memperbesar atau memperkecil skala. nilainya adalah "yes" atau "no"
-
minimum-scale
Batas minimal yang dapat pengunjung lakukan untuk memperkecil skala. Jika 1.0 tidak dapat diperkecil
-
maximum-scale
Batas maksimal yang dapat pengunjung lakukan untuk memperbesar skala. Jika 1.0 tidak dapat diperbesar
Walaupun seperangkat Meta Tag Viewport sangat penting untuk website responsive, tapi berpikirlah dua kali untuk memutuskan untuk memasangnya di website Anda. Karena kenapa? Di beberapa website membutuhkan perubahan skala untuk melihat semua isi website yang melebihi lebar jendela browser, jika kita menonaktifkan skala justru malah website Anda seperti terpotong sebelah.
Tips: Jangan menggunakan properti "width" ketika Anda ingin menonaktifkan skala, hal tersebut dapat menyebabkan halaman tertutupi ketika merubah layar ke landscape mode.
