Polaroid
Home » Article » Responsive » Pentingnya Meta Tag Viewport Untuk Website Responsive

Pentingnya Meta Tag Viewport untuk website responsive

f_huda19   22 Februari 2015   23:00:08   1 Suka   Favorit

Viewport Meta Tags

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.

<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.

KOMENTAR

spotlife

spotlife 17 Feb 15

mantap nih, jadi lebh tahu. http://spot-life.xtgem.com http://infobagus-foryou.blogspot.com

saiyo.hexat.com

saiyo.hexat.com 22 Feb 15

Keren juga sob, css punya agan.. Ane bkal seringan berkunjung kesini. Boleh minta bantuan sob? Saya punya masalah untuk title xtblog saya. Bisa share script css untuk xtblog title entry nya?

f_huda19

Admin 22 Feb 15

maksudnya xtblog title entry itu yang bagian mana sob? apakah judul di bloglist atau judul di single post?

free wallpapers

free wallpapers 15 Mar 15

bagus nih gan... http://free-wallpappers.blogspot.com