Tingkat kesulitan : Easy
Bahasa pemrograman : Javascript
Penjelasan : Script ini berfungsi mengatur agar sebuah script hanya berjalan pada perangkat / device dengan lebar maksimal 768px atau lebih atau kurang.
Tergantung anda mengatur sebesar apa batasan lebar layarnya.
Perbedaan paling mencolok antara versi CSS & versi Javascript adalah :
- @Media pada CSS hanya untuk mengatur tampilan desain saja, tidak bisa menjalankan fungsi-fungsi. Sedangkan versi Javascript bisa kedua nya.
- Di versi javascript nama scriptnya adalah matchMedia bukan @media. Saya sengaja memberi judul dengan @media karena lebih mudah dipahami oleh pengunjung lebih sering dicari keywordnya di Google 😁.
Kalau anda mencari yang versi CSS, silahkan baca panduan tentang CSS : @Media Query Responsive untuk Semua Device.
Sebagai tambahan, script ini simpel & bisa digunakan berkali-kali juga bisa digunakan pada banyak function sekaligus.
Javascript
<script type="text/javascript">
function contohFunction(x) {
if (x.matches) { // Jika ukuran layar sesuai dengan .matchMedia
document.body.style.backgroundColor = "#181818";
} else {
document.body.style.backgroundColor = "#f2f2f2";
}
}
var x = window.matchMedia("(max-width: 768px)")
contohFunction(x) // Memanggil fungsi
x.addListener(contohFunction) // Menambahkan listener kepada fungsi
</script>
Bagian yang saya beri tanda adalah lebar maksimal dimana script boleh berjalan.
Jika lebarnya lebih besar, script tidak akan berjalan.
Anda bisa mengganti lebar nya sesuai keinginan anda.
Dan juga, jika anda hanya ingin menjalan fungsi diatas tanpa timbal-balik, cukup hapus bagian else pada scriptnya.
Oh iya, pada function diatas, saya hanya merubah warna latar belakang sebuah website / blog.
Silahkan anda hapus script yang berawalan document.body.style dan ganti dengan script milik anda.
