Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Petunjuk Singkat: Jangan Lupa Viewport Meta Tag

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Explaining the “Details” and “Summary” Elements

Indonesian (Bahasa Indonesia) translation by Thoriq Firdaus (you can also view the original English article)

Saya ingat perjalanan pertama saya mempelajari responsive web design; saya menggunakan grid biasa, bergulat dengan tata letak fleksibel, dan menangangani media queries untuk pertama kali. Melebarkan dan mengecilkan jendela browser menghasilkan tampilan yang memuaskan. Kemudian saya mencobanya di perangkat mobile. Nampaknya tidak bekerja - saya hanya melihat versi yang dikecilkan dari desain ukuran penuh. Solusinya, ternyata, cukup mudah..

Catatan: Tutorial ini pertama kali diterbitkan pada Februari 2012, namun sering digunakan sebagai rujukan dari tutorial-tutorial yang lain (serta beberapa hal telah berubah) jadi saya rasa tutorial ini patut diperbarui.

Inti

Jika anda tidak membaca hal lain pada artikel ini, ambilah satu petunjuk berikut: jika anda mendesain secara fleksibel, gunakan viewport meta tag pada <head>. Secara garis besar, tag tersebut akan mengatur layout lintas-perangkat untuk anda dengan sendirinya.

Masalah

Mari kita menggunakan satu contoh layout yang telah saya siapkan. Coba lihat; anda akan menjumpai layout tersebut menyusut dan melebar ketika anda mengubah ukuran browser anda. Terdapat juga satu media query yang membuat teks membesar serta memberikan heading warna cerah #ff333e pada layar yang lebih lebar. Lovely.

Berikut tampilannya di OSX Chrome

viewport-chrome-correct

Dan berikut adalah tampilannya ketika jendela browser dimampatkan.

viewport-chrome-squish

Sekarang, mari kita lihat tampilannya di ponsel (dalam hal ini, iOS Safari pada iPhone 4):

viewport-iphone-incorrect

Hal pertama yang anda perhatikan adalah heading merah; kenyataannya adalah kita tidak melihat penyempitan layout seperti yang kita harapakan. Kita sebenarnya melihat versi yang diperkecil secara visual.

iOS Safari berasumsi bahwa halaman web tersebut memiliki lebar 980px, kemudian memperkecilnya agar dapat termuat pada lebar keseluruhan yang tersedia (iPhone 4) yaitu 320px. Hasilnya, konten menjadi kurang dapat dibaca, kecuali anda memperbesarnya.

Mengapa?

Seperti yang banyak orang katakan, asumsi adalah induk dari segala sesuatu namun hal itulah tepatnya yang browser mobile lakukan jika anda tidak menginstruksikannya secara spesifik. Ketika anda mengunjungi sebuah website melalui browser mobile ia akan berasumsi bahwa anda sedang memandang sebuah desktop ukuran besar dan anda ingin melihat seluruh website, bukan hanya bagian pojok kiri. Karena itu browser akan mengatur lebar viewport pada (dalam kasus iOS Safari) 980px, memaksa semuanya masuk ke dalam display yang kecil.

Viewport Meta Tag

Viewport meta tag diperkenalkan oleh Apple, kemudian diadopsi dan dikembangkan lebih lanjut oleh lainnya.

Tag tersebut nampak seperti ini:

Di dalam content="" anda dapat memasukkan beberapa nilai yang dibatasi koma, namun untuk saat ini kita akan fokus pada hal-hal yang mendasar terlebih dahulu.

Sebagai contoh, jika desain anda sengaja dirancang pada 320px, anda dapat menentukan lebar viewport menjadi:

Agar layout menjadi fleksibel, cara terpraktis adalah mendasari lebar viewport anda sesuai perangkat, agar lebar layout anda mencocoki dengan lebar perangkat yang anda gunakan.

Untuk memastikan bahwa layout anda akan ditampilkan seperti yang anda maksudkan, anda juga dapat mengatur tingkat pembesaran (zoom). Contoh berikut:

..akan memastikan bahwa ketika terbuka, layout anda akan ditampilkan dengan baik pada skala 1:1. Tidak ada pembesaran yang dilakukan. Anda bahkan dapat beranjak lebih jauh dan mencegah pembesaran yang dilakukan oleh pengguna.

Catatan: Sebelum menerapkan parameter maximum-scale, pertimbangkan apakah anda sungguh harus menghalangi pengguna anda untuk melakukan pembesaran. Apakah mereka dapat membaca semua isi website dengan baik?

Menggunakan viewport meta tag dengan cara yang salah dapat menghalangi para pengguna dengan masalah penglihatan mengakses website anda.

Ringkasan

Viewport meta tag dengan nilai-nilai berikut memberi kita sebuah penerapan standar yang baik:

Mari kita lihat bagaimana dampaknya pada contoh kita:

viewport-iphone-correct

Seperti yang dapat anda lihat, semuanya tetap pada skala yang benar. Teks tidak mengecil melainkan menyeusaikan dengan luas bidang, dan bantuan visual kita (heading warna merah) telah hilang.

Tapi!

Terima kasih untuk Jason karena telah menunjukkan hal ini di komentar. Dengan menyatakan bahwa lebar dari layout anda adalah sama dengan lebar perangkat, anda akan mengalami masalah ketika perangkat tersebut digunakan pada mode landscape. Lihatlah bagaimana iPhone 4 menampilkan demo kita, pada mode landscape:

Ruined
Hancur.

Browser merasa berkewajiban untuk memperbesar, agar mencocoki dengan lebar halaman.

Untuk mengatasi hal ini, kita dapat, sebagaimana yang Jason tunjukkan, menggunakan JavaScript untuk secara kondisional memilih atribut metatag mana yang kita gunakan, tapi solusi paling sederhana sepertinya cukup dengan sama sekali mengabaikan width. Dengan hanya mengatur initial-scale lebarnya menjadi tersimpul. Berikut adalah bagaimana demo baru kita, yang telah disederhanakan tampil pada mode landscape

Much better
Lebih baik.

Bukan Standar yang Anda Cari

Viewport metatag adalah solusi dari Apple. Tag tersebut kemudian dengan cepat diadopsi oleh platform lain, namun tidak pernah dilanjutkan oleh W3C. Microsoft mengusung hal ini ketika mereka memilih untuk mengabaikan viewport metatag di bawah kondisi terentu. Alih-alih, meraka memilih menggunakan CSS Device Adaptation, yang merupakan hal yang W3C sedang sandarkan.

Singkatnya, besaran viewport yang serupa dapat ditentukan dengan menggunakan aturan @viewport, alih-alih di dalam HTML.

Atau, sesuai dengan pendekatan terbaru kita jangan menyantumkan lebar perangkat, kita dapat mengaturnya sebagai berikut:

Karena hal ini masih dalam pengerjaan, IE10 membutuhkan penambahan awalan dari versi yang diajukan dalam proposal, yang terlihat seperti di bawah ini:

Ini adalah cara yang lebih elegan ketimbang metatag, namun masih membutuhkan perjalanan panjang sebelum akhirnya didukung penuh. Sisipkan ini ke CSS anda sekarang, untuk memastikan bahwa desain responsif anda berjalan di "snap mode" IE10, dan pantau terus perkembangan selanjutnya. Inilah di mana kendali viewport tertuju.

Anda dapat membaca lebih lanjut tentang hal ini pada artikel yang ditulis oleh Tim Kadlec IE10 Snap Mode and Responsive Design.

Kesimpulan

Desain web responsif tidak hanya bagi orang-orang yang menikmati melihat browser mereka melebar dan menyusut, ini adalah soal mencakup bermacam-macam perangkat yang berbeda, layar dan resolusi sebanyak mungkin! Letakkan viewport meta tag pada <head> anda, dan aturan @viewport pada CSS anda ketika membangun layout fleksibel and you're good to go.

Baca Lebih Lanjut

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.