DI jaman serba smartphone ini banyak dari pengguna internet berselancar menggunakan handphone ketimbang menggunakan komputer. Karena selain lebih praktis, handphone adalah perangkat yang sering kalian bawa kemana saja, sehingga kalian bisa setiap saat berinternetan kapan saja dan dimana saja. Hal ini juga dapat mempengaruhi konten website yang akan ditampilkan. Karena jenis website harus menyesuaikan dengan perangkat apa yang digunakan pengunjung saat mengakses website kita.

Sesuai dengan pembahasan artikel kali ini adalah kita akan mencoba membuat suatu script untuk mendeteksi perangkat mobile dengan jquery. Dengan jquery kita bisa tau website kita sedang di akses dengan menggunakan perangkat apa. Jadi kalian bisa bermain dengan tampilan atau isi konten website kalian jika website kita diakses dengan perangkat apa. Menarik bukan ?

Lalu bagaimana caranya agar kita tau website kita sedang diakses oleh perangkat apa ?

Caranya cukup mudah, kalian bisa ikuti langkah-langkah yang akan kita bahas. Kalian bisa buka website http://detectmobilebrowsers.com/ . Lalu download untuk versi jquery. Nanti akan muncul script namun masih dalam format txt. Kalian cukup hapus .txt tersebut dan akan otomatis menjadi file javascript seperti gambar dibawah ini.

Setelah sudah, sekarang kalian buat file htmlnya seperti berikut ini.

index.html

Setelah sudah kalian simpan filenya dengan format html. Dan jangan lupa untuk menyimpan filenya harus dalam satu folder dengan file javascript yang telah kita download sebelumnya.

Untuk melihat hasilnya kalian harus buka lewat browser kalian. Jika berhasil maka tampilanya akan seperti ini.

Jika kalian buka filenya lewat komputer, maka yang akan tampil adalah background biru.

Tetapi jika kalian buka lewat browser di hp, tampilan yang muncul adalah background merah. Hal ini berbeda dengan fitur seperti di bootstrap, karena bootstrap merubah tampilan dari desktop ke mobile berdasarkan lebar browsernya. Jika browser kalian kecilkan ukuranya maka akan berubah tampilan. Namun tidak dengan jquery, karena membacanya dari perangkat. Jadi mau dikecilin browsernya akan tetap dianggap desktop .

Mudah bukan ?

Sekian pembahasan mengenai cara mendeteksi perangkat mobile dengan jquery. Semoga bermanfaat.