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!
sumber :
http://www.mas-sugeng.com/2012/08/cara-membuat-gambar-responsive-di.html
Ditulis oleh:
The Cloner Template -
Kamis, 18 Oktober 2012 - Rating:
4.5
Terima kasih sudah membaca artikel kategori dengan judul Cara Membuat Gambar Responsive di Browser Mobile. Anda bisa bookmark halaman ini dengan URL https://demo-cloudy.blogspot.com/2012/10/cara-membuat-gambar-responsive-di.html?m=0. Jangan lupa share ke teman-teman ya.
