Meta Tag Viewport - Pengertian, Fungsi Dan Cara Penerapannya

April 26, 2021

Sebagian blogger tentunya sudah tidak asing dengan tag meta khususnya meta viewport yang akan saya jelaskan ini, tapi sebagian blogger lainnya mungkin masih ada yang belum pahap tentang <meta name="viewport"> serta penerapannya di situs web (blog).

Untuk itu di artikel ini saya akan jelaskan semaksimal mungkin mengenai meta tag viewport ini, mulai dari definisi (pengertian meta viewport), fungsi, hingga penerapan meta viewport yang benar termasuk selector atau atribut yang ada pada meta tag viewport juga akan saya bahas disini.

meta tag viewport, pengertian dan cara penerapannya yang sesuai dengan pedoman aksesibilitas

Definisi Meta Viewport

<meta> viewport adalah mekanisme situs web yang digunakan untuk mengatur jarak pandang dan penskalaan halaman web agar semua ukuran setiap elemen pada situs web benar di semua perangkat (mobile maupun dekstop).

Perangkat seluler (mobile device) umumnya merender halaman web dengan ukuran layar desktop, kemudian ukuran halaman diturunkan sehingga hal itu membuatnya sulit untuk dibaca.
[ads id="ads1"] Dengan menyetel tag meta viewport, lebar dan penskalaan hamalaman dapat diatur sehingga lebar dan penskalaan halaman web benar (sesuuai) di semua perangkat dan ukuran layar.

Fungsi Meta Viewport

Dari definisi di atas sebenarnya sudah bisa dipahami bahwa fungsi tag meta viewport adalah untuk mengatur lebar dan penskalaan halaman web agar mudah untuk dibaca. Penggunaan <meta> viewport yang benar meningkatkan aksesibilitas situs web/blog terhadap pengunjung.

Selain itu <meta> tag yang di <head> situs dibaca dan dikenali oleh crawler google termasuk <meta name="viewport">, dengan adanya tag meta viewport di <head> situs crawler google akan mengetaui bahwa halaman anda memiliki accessibility yang baik untuk pengguna.

Cara Memasang Meta Tag Viewport Di Website / Blog

Tambahkan meta tag viewport diantara tag pembuka <head> dan tag penutup </head> dalam html situs web/blog anda, seperti contoh di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta content="width=device-width,initial-scale=1" name="viewport"/>
    ...
  </head>

Keterangan

Selector atau atribut width=device-width mengatur lebar viewport sesuai atau sama dengan lebar perangkat.
Selector initial-scale=1 mengatur skala atau tingkat zoom halaman web saat petama kali dibuka oleh pengguna.

Basically penerapan <meta> viewport adalah sperti yang terlihat pada contoh, adapun atribut atau selector lainnya seperti user-scalable, minimum-scale dan atribut maximum-scale tidak terlalu diperlukan karena meta tag viewport pada contoh di atas, setara atau sama dengan:

<meta content="width=device-width,initial-scale=1,minimum-scale=1," name="viewport"/>
dan <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5, user-scalable=1" name="viewport"/>

Spesifikasi Selector Meta Viewport

width selector yang digunakan untuk menentukan lebar viewport.
initial-scale untuk mengatur penskalaan halaman.
user-scalable penskalaan oleh pengguna.
minimum-scale untuk mengatur skala minimum.
maximum-scale untuk mengatur skala maximum.

Atribut atau selector meta viewport yang wajib digunakan dalam content hanyalah width dan initial-scale. Dimana nilai atau value selector width adalah device-width dan value selector initial-scale diisi dengan angka 1 atau 1.0.

Jika kamu ingin menggunakan atribut maximum-scale nilai value tidak boleh kurang dari 5.

Hal yang harus dihindari

Dalam pedoaman aksebilitas yang harus dihindari dalam meta tag viewport adalah atribut user-scalable="no" karena parameter user-scalable="no" akan menonaktifkan zooming dan penskalaan oleh pengguna.

Seharusnya ketika halaman web dibuka oleh pengguna di perangkat mobile, mereka harus bisa men-zoom halaman web anda.

Jika halaman tidak bisa di zoom dengan menggeserkan dua jari pada layar kearah yang berlawanan, itu artinya penskalaan telah dinonaktifkan oleh atribut user-scalable="no" dalam <meta name="viewport">.

Menguji Meta Viewport Anda

Untuk mengetahui apakah tag <meta name="viewport"> anda sesuai dengan pedoman aksesibilitas silahkan uji situs web/blog anda dengan menggunakan tool analisis web yakni Lighthouse, Google PSI dan Web.dev measure.

Jika penerapan <meta> viewport tidak benar atau tidak sesuai dengan pedoaman aksesibilitas maka kamu menemukan notifikasi sepert berikut ini.

[user-scalable="no"] digunakan dalam <meta name="viewport"> dan [maximum-scale] nilainya kurang dari 5.

Zooming dan penskalaan dinonaktifkan oleh meta viewport

Untuk mengatasi isu tersebut yang kamu perlu lakukan adalah menghapus selector atau atribut user-scalable="no" dari meta tag viewport anda.

Kesimpulan

Dalam menerapkan meta viewport value dalam atribut width harus device-width, kemudian zooming dan penskalaan tidak boleh dinonaktifkan dan skala maksimum tidak boleh kurang dari 5.

Untuk memenuhi tuntutan tersebut silahkan gunakan salah satu meta tag viewport yang saya contoh kan di atas, selesai...!

Cari Blog Ini

Niko