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
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 saja share dari saya semoga berguna...
8 komentar
harus tahu ukuran masing2 device ya,, mantep mas :D
BalasHapuskalau msalah resolusi device tinggal cek di tool responsive sob :)
HapusJadi tidak menyulitkan pengunjung yang menggunakan mobile ya
BalasHapusbener tu karena tampilan di mobile tidak acak acakan sob :)
HapusItu adalah view port device standar. Kalau pengen ditambah tinggal ganti nilainya saja :D
BalasHapussip kang tinggal di modifikasi :D
HapusMasih bingung dengan yang beginian mas, hehe
BalasHapusdi pelajari dulu sob :D
HapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>