Berkenalan dengan Viewport Meta Tag

Update Terakhir pada

rwd-cover-3

Halo teman-teman WebHozz kali ini kita akan berkenalan dengan Viewport Meta Tag, nah biasanya dalam mendesain sebuah website yang responsif atau fleksibel kita membutuhkan ini.

Apabila kita tidak memberikan Meta Tag Viewport ini, mungkin tampilan dekstop tidak akan berpengaruh tetapi akan memberikan efek berbeda bila dilihat di perangkat mobile, atau monitor dengan ukuran layar yang kecil.

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

Berikut ini adalah contoh penerapannya :

facebook-tanpa-viewport

Facebook tanpa Meta Tag Viewport, dan gambar dibawah ini dengan Meta Tag Viewport

facebook-dengan-viewport

Ya teman-teman ketika kalian ingin membuat sebuat website yang responsif jangan lupa untuk memberikan Meta Tag Viewport dan tambahan @media query.

Dalam mendesain web responsif, tujuannya adalah bagaimana layout web yang kita buat menyesuaikan sesuai dengan ukuran device atau perangkat yang sedang digunakan.