Pentingnya Meta Viewport Untuk Web Responsive

Meta viewport, mungkin ini meta yang sedikit asing untuk para blogger yang jarang mengutak-atik meta tag, tetapi walaupun asing meta tag ini tentu sangat vital perannya dalam Web yang ingin tampil responsive.

Kenapa bisa begitu ?
Karena viewport ini meta salah satu fungsinya yang dapat menginstruksikan isi web untuk melakukan penyesuaian pada lebar perangkat yang sedang berjalan. Berikut isinya.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Inti dari meta ini adalah contentnya, jika kita melihat dalam content terdapat properti ;

Width=device-width

Properti ini memiliki perintah supaya elemen web dapat menyesuaikan diri pada lebar perangkat, sehingga tidak akan terjadi yang namanya overflow atau scroll horizontal saat web terbuka menggunakan perangkat yang lebih kecil.

Initial-scale=1

Ini menentukan skala awal yang akan terlihat saat pertama kali web terbuka, yang artinya skala web tidak mengalami pembesaran atau 1:1.

Maximum-scale=1

Dengan ini kawan dapat membatasi zooming atau pembesaran pada blog kawan yang dilakukan oleh pengunjung.

Penggabungan Dengan Media Queries

Nah, jika anda sudah menggunakan Meta Viewport maka anda juga dapat menggunakan media queries sebagai penyesuaian elemen-elemennya supaya tidak berantakan pada saat web beradaptasi dengan ukuran perangkat. Untuk penggunaannya, saya sudah menulisnya di artikel berikut.

Membuat Blog 100% Responsive Dengan Media Queries

Diatas sudah saya jelaskan cara penggunaan media queries, jadi silahkan disimak.
Saya kira cukup disini, saya harap bermanfaat sekian dan terima kasih.