Pada waktu kita membahas mengenai instalasi Bootstrap 4 kita menyiapkan css, js, dan penempatan pada dokumen HTML. Pada bagian awal kita menyusun meta tag viewport seperti source code berikut ini:
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no“>
Tujuan dari Bootstrap 4 menyajikan meta viewport ini adalah untuk menjalankan strategi Mobile First. Dengan strategi Mobile First ini Bootstrap akan mengomptimalkan source code untuk perangkat mobile dahulu, scale up atau diperbesar ke tampilan lebih besar sesuai ukuran layar dari perangkat.
Penjelasan mengenai meta viewport di atas:
- width=device-width.
Lebar halaman web mengikuti lebar dari tampilan layar device/peralatan.
- initial-scale=1.
Tampilan awal adalah tanpa zoom
- shrink-to-fit=no. Ini seting khusus IOS saja
Tujuan dari meta viewport ini adalah memberikan kesempatan kepada web designer dan web delevoper untuk mengatur tampilan yang responsif. Tampilan responsif adalah tampilan berespon terhadap device yang dipakai penggunanya. Di sini tampilan halaman web akan menyesuaikan diri dengan ukuran layar dari perangkat yang dipakai pengguna.
Informasi lebih lanjut silahkan mengunjungi
1. https://getbootstrap.com/docs/4.2/getting-started/introduction/ .
2. https://www.w3schools.com/css/css_rwd_viewport.asp .
3. https://stackoverflow.com/questions/33767533/what-does-the-shrink-to-fit-viewport-meta-attribute-do .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.