Setelah sebelumnya sempat menuliskan sedikit tutorial tentang costumisasi tampilan template versi seluler yang ada di blogspot, kali ini saya akan mencoba melanjutkan tutorial tersebut, yang kali ini adalah tentang bagaimana cara membuat gambar responsive di browser mobile dengan harapan tampilan templater versi seluler blog sobat semakin menjadi mantap. Untuk yang belum pernah membaca postingan tutorial saya sebelumnya, sobat bisa temukan toturial tersebut di kategori Blog Design di blog ini.
Bagi sobat yang terbiasa mengotak-atik css mungkin sudah tahu bagaimana cara agar gambar bisa responsive dengan ukuran layar browser. Yaitu dengan menggunakan CSS gambar responsive seperti ini:
img {
width:auto;
max-width:100%;
}
Namun, CSS di atas hanya berlaku di browser desktop. Sedangkah di browser mobile, CSS di atas tidak menghasilkan efek apapun, gambar yang dirender akan tetap pada ukuran aslinya. Ini dikarenakan browser mobile memiliki perilaku yang aneh, yaitu perilaku "berpura-pura." berpura-pura disini maksudnya adalah berpura-pura mengondisikan dirinya (browser mobile) sebagai browser desktop yang memiliki lebar jendela tertentu. Contohnya pada browser Opera Mobile, saat merender sebuah halaman web, Opera Mobile akan berpura-pura menjadi browser desktop yang memiliki lebar jendela 980 pixel. Jadi, intinya saat membaca kode CSS gambar responsive di atas, browser mobile akan mengacu pada lebar jendela palsu tadi, bukan pada lebar layar perangkat.
Nah, bagaimana caranya supaya kode CSS gambar responsive di atas bisa berfungsi di browser mobile? Caranya sangat mudah sekali, kita tinggal menyuruh browser mobile untuk tidak lagi berpura-pura saat merender halaman web/blog kita. Loh, emang bisa? Ya, sangat bisa sekali. Untuk menyuruh agar browser mobile tidak berpura-pura, cukup tambahkan kode meta tag di bawah ini di dalam tag <head>:
<meta content='width=device-width' name='viewport'/>
Nama kode di atas adalah meta tag viewport yang bertugas untuk menyuruh browser mobile agar tidak berpura-pura menjadi browser desktop lagi. Namun sayangnya tidak semua browser mobile mendukung kode meta tag di atas. Contohnya di browser Opera Mobile yang hanya didukung di versi 11 ke atas. Oww.. tapi tidak perlu khawatir, agar bisa berlaku di semua browser, cukup tambahkan kode CSS di bawah ini:
/* viewport */
@-o-viewport {width: device-width;
}
@-moz-viewport {width: device-width;
}
@-webkit-viewport {width: device-width;
}
@-ms-viewport {width: device-width;
}
@viewport {width: device-width; }
Kode CSS di atas fungsinya sama, yaitu untuk menyuruh browser mobile agar tidak berpura-pura lagi. Hanya dikhususkan untuk browser yang tidak mendukung kode meta tag di atas. Dan jangan lupa, taruh kode CSS di atas tepat di atas kode ]]></b:skin>
Dan ini adalah contoh penampakan gambar di blog ini saat dilihat melalui browser Opera Mini versi 4.4:
Gambar di atas adalah gambar Neil Armstrong bersama pak Slamet saat mendarat di Bulan dengan lebar gambar aslinya adalah 300 pixel dan dilihat di resolusi layar 240x320 pixel. Responsive bukan? Semoga bermanfaat!
Title : Cara Membuat Gambar Responsive di Browser Mobile
Description : Setelah sebelumnya sempat menuliskan sedikit tutorial tentang costumisasi tampilan template versi se...