Menggunakan CSS3 Media Queries untuk Menentukan Target di iPad & iPhone

Seorang designer akan kesulitan jika disuruh mendesain sebuah website di iPhone ataupun iPad, apalagi bagi orang yang belum pernah menyentuhnya 😀 akan sulit mengira-ngira berapa ukuran layar dari iPhone dan iPad tersebut. Nah! Berikut saya berikan kode agar supaya kita mudah mendesain di iPhone & iPad. tips ini saya temukan disini

Cara nge-link CSS di iPhone & iPad :

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="iPad.css" />
<!--<![endif]-->

Cara diatas adalah ngelink style secara external. Bagaimana kalau secara internal? maksudnya meletakkan kode pada style kita yang sudah ada

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.selector-01 { margin: 10px; }
	.selector-02 { margin: 10px; }
	.selector-03 { margin: 10px; }
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
	.selector-01 { margin: 10px; }
	.selector-02 { margin: 10px; }
	.selector-03 { margin: 10px; }
}

Mudah bukan? 🙂

Baca Juga:  Cara Menggunakan Bootstrap Untuk Pemula (bagian 1)

Berhubung saya tidak punya iPhone ataupun iPad alangkah baiknya jika yang punya meminjamkan untuk saya untuk di coba 😛 hehe

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram türk takipçi satın al