Share Info
Berikut Cara Memasang Meta Viewport Pada Blogspot:
Membahas responsive memang agak panjang lebar, dan
perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan
menggunakan meta tag viewport dalam responsive.
Dalam Responsive Meta Tag Viewport sangat
penting karena meta tag ini berguna untuk menentukan tata letak tampilan
Mobile. ketika blog kita di akses lewat Browser Desktop Meta Tag ini tidak
memiliki fungsi, namun ketika blog kita di akses atau di buka via Mobile
Browser barulah si viewport ini bekerja.
Dibawah ini merupakan meta tag viewport yang
paling sering digunakan oleh para blogger.
<meta content='width=device-width,
initial-scale=1, maximum-scale=1' name='viewport'/>
Tampilan dari blog yang tidak memiliki atau
memasang skala yang perlu ditentukan akan terlihat berantakan jika diakses pada
versi mobile, untuk itulah meta ini berguna dan pemecahan masalahnya.
Untuk lebih jelas pada bahasan Meta Tag viewport
kita bisa lihat contoh di bawah ini perbedaan menggunakan meta tag viewport dan
tidaknya
berikut ini cara sederhana menerapkan meta tag
viewport dan media queries.
contoh ini adalah tampilan menggunakan pengodean
versi HTML5.
<!DOCTYPE
html>
<HTML>
<head>
/* pemasangan meta viewport */
<meta content='width=device-width,
initial-scale=1, maximum-scale=1' name='viewport'/>
<style type='text/css'>
/* CSS
Template */
body {
...nilai
css page body...
}
/* CSS
MEDIA QUERy */
@media
screen and (max-width: 1024px){
/* CSS
styles */
}
@media
screen and (max-width:768px){
/* CSS
styles */
}
@media
screen and (max-width:600px){
/* CSS
styles */
}
@media
screen and (max-width:480px){
/* CSS
styles */
}
@media
screen and (max-width:320px){
/* CSS
styles */
}
@media
screen and (max-width:240px){
/* CSS
styles */
}
</style>
</head>
</body>
...isi blog...
</body>
</HTML>
jika sobat ingin desain template blognya bisa
tampil sempurna bisa memasang semua resolusi dalam media queries di contoh di
atas, resolusi yang paling baik yang akan di tentukan dalam resolusi responsive
Web Desain pada perangkat Mobile adalah pada resolusi 768px.
setiap penerapan media queries akan terlihat
jelas jika anda mengecilkan ukuran browser anda ketika halaman sudah di muat
untuk melihat apakah sudah sesuai atau belum.
sekian semoga bermanfaat... !!!
