Cara Mendeteksi Browser Seluler dengan JavaScript

Deteksi seluler selalu menjadi aspek penting dalam pengembangan aplikasi. Ini relevan baik untuk aplikasi, tetapi juga perangkat lunak dan situs web. Ada banyak alasan untuk memeriksa agen browser seluler. Yang terpenting, kemampuan untuk memberikan pengalaman pengguna yang unik.

Pustaka UAParser.js sendiri mendapatkan jutaan unduhan paket mingguan. Dan, dalam banyak kasus, itu sudah cukup jika Anda membangun sesuatu dari awal. Namun, bagaimana dengan cara alternatif untuk mendeteksi browser seluler dengan JavaScript?

Terkadang Anda mungkin hanya menginginkan solusi sederhana yang melakukan pekerjaan tanpa perpustakaan apa pun. Dan dalam artikel ini, saya akan menjelaskan kepada Anda beberapa teknik JavaScript untuk mendeteksi pengguna seluler. Beri tahu saya jika saya melewatkannya!

navigator.userAgent

Cawan suci deteksi browser adalah properti navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Ini, tentu saja, cara yang sangat primitif untuk melakukannya. Itu dapat dengan mudah dimanipulasi karena properti User-Agent dapat dipalsukan. Tetapi, karena ini berfungsi, Anda masih dapat menggunakannya dalam berbagai proyek. Misalnya Halaman arahan atau membuat pengalihan khusus ke versi seluler.

Bagaimana cara menggunakan navigator.userAgent untuk mendeteksi jenis browser dan menampilkan konten berdasarkan browser tertentu?

Oke, jadi, mungkin ada kasus penggunaan unik di mana Anda ingin mendeteksi browser tertentu, seperti Chrome dan Firefox (atau dalam hal ini, Android dan iPhone), lalu menggunakan data tersebut untuk menampilkan konten tertentu. Pendekatan ini sering digunakan untuk menyediakan/mengubah tautan unduhan untuk peramban tertentu.

Dalam kasus seperti itu, Anda dapat menggunakan fungsi berikut.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Anda dapat mengomentari berbagai pernyataan else if untuk browser yang tidak ingin Anda periksa, dan juga – Anda dapat menambahkan browser tambahan yang ingin Anda periksa.

Acara Sentuh

Salah satu metode untuk mendeteksi pengguna ponsel adalah dengan memeriksa apakah perangkat memiliki layar sentuh.

Menggunakan properti GlobalEventHandlers.ontouchstart Anda dapat melakukan pemeriksaan sederhana untuk melihat bagaimana pengguna berinteraksi dengan aplikasi Anda. Jika interaksi berasal dari layar sentuh, Anda kemudian dapat mengembalikan versi seluler aplikasi atau halaman.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Perangkat layar sentuh seperti Surface tidak memiliki properti ini. Jadi, pengguna yang berasal dari perangkat sentuh berbasis desktop akan tetap melihat versi desktop halaman Anda.

Window.matchMedia()

Window.matchMedia() adalah salah satu properti terbaik untuk mendeteksi pengguna seluler dengan JavaScript. Dan itu karena memungkinkan Anda berinteraksi dengan CSS secara langsung.

Dalam banyak kasus, kueri media lebih unggul karena memiliki alat deteksi seluler bawaan. Misalnya, Anda dapat melakukan panggilan untuk memeriksa apakah “pointer:coarse” benar.

Pernyataan khusus ini memvalidasi apakah penunjuk perangkat baik atau kasar .

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

Atau, perangkat mungkin memiliki penunjuk halus dan kasar. Untuk kasus penggunaan ini, kita dapat memeriksa apakah ada pointer yang kasar.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Ingatlah bahwa ini hanya memvalidasi kueri sebagai benar atau salah. Cara yang lebih halus untuk memeriksa perangkat seluler adalah dengan menggunakan kueri media secara langsung.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Kueri ini akan langsung memeriksa lebar maksimum perangkat dan menegaskan apakah cocok dengan kriteria. Sekali lagi, ini cukup banyak pekerjaan untuk mendapatkan semua perangkat dengan benar. Dengan demikian, lebih mudah menggunakan perpustakaan yang dibuat sebelumnya dengan semua jenis perangkat yang sudah ditentukan.

Berguna dalam konteks tertentu

Selama bertahun-tahun ada banyak properti JavaScript untuk mendeteksi jenis perangkat. Sebagian besar dari mereka tidak digunakan lagi, tetapi sebagian besar lainnya diintegrasikan ke dalam perpustakaan. Yang juga merupakan cara terbaik untuk melakukan deteksi seluler yang tepat.

Last but not least, sebagian besar kerangka kerja modern sudah menyertakan deteksi seluler sebagai bagian dari kerangka kerja itu sendiri. Layak untuk dilihat jika Anda tidak ingin melakukan semua kerja keras.

Perpustakaan untuk Mendeteksi Perangkat Seluler

Untuk bagian ini, saya akan membuat daftar pustaka JavaScript paling populer untuk mendeteksi perangkat seluler. Sekali lagi, saya tekankan bahwa ini khusus untuk JavaScript. Lihat dokumen untuk penerapan yang tepat di aplikasi Anda.

UAParser.js

Sejauh perpustakaan lengkap berjalan, UAParser adalah yang terbaik. Dengan lebih dari 10 juta unduhan mingguan di npm saja – UAParser adalah solusi de facto untuk mendeteksi perangkat seluler. Seperti namanya – perpustakaan bekerja dengan mem-parsing string User-Agent.

Namun, yang membuatnya begitu populer adalah kenyataan bahwa Anda dapat mengurai ratusan variasi perangkat. Dan, semuanya terdokumentasi dengan sangat baik. Anda dapat beralih dari vendor perangkat praktis ke pola deteksi yang lebih rumit seperti arsitektur CPU.

deteksi seluler.js

Ini adalah port yang cukup mudah dari perpustakaan Deteksi Seluler untuk PHP, yang disediakan untuk komunitas oleh Heinrich Goebl. Pustaka itu sendiri menggunakan Agen-Pengguna untuk pendeteksian, jadi seperti yang telah kita bahas sebelumnya – bukan opsi terbaik.

Namun, itu harus melakukan pekerjaan ketika datang ke template HTML praktis atau proyek portofolio.

isMobile

Di sini kita memiliki pandangan lain tentang properti User-Agent Navigator dari Kai Mallea. Meskipun masih merupakan solusi yang sederhana, saya suka bahwa Mobile menyediakan berbagai spesifikasi. Misalnya, Anda dapat menguji perangkat seluler apa pun atau perangkat tertentu seperti ponsel atau tablet .

reaksi-perangkat-deteksi

Apakah Anda seorang pengembang React.js?

Maka perpustakaan dari Michael Laktionov ini untuk Anda. Ini berfungsi seperti yang Anda harapkan – pertama-tama perpustakaan mendeteksi tipe perangkat, lalu merender tampilan berdasarkan tipe itu. Bekerja dengan sempurna dengan integrasi komponen, dan dapat disesuaikan lebih lanjut melalui panggilan API.

Satu fakta menarik adalah jumlah penyeleksi perpustakaan ini. Ini mencakup perangkat seperti TV pintar, perangkat yang dapat dikenakan, berbagai perangkat iPhone, dan banyak lagi. Ini memberi Anda banyak pilihan pilihan desain saat membuat aplikasi untuk perangkat tertentu.