Saya mencari fungsi yang mengembalikan nilai boolean jika pengguna memiliki browser seluler atau tidak.
Saya tahu bahwa saya bisa menggunakan navigator.userAgent
dan menulis fungsi itu dengan menggunakan regex, tetapi agen-pengguna terlalu beragam untuk platform yang berbeda. Saya ragu bahwa mencocokkan semua perangkat yang mungkin akan mudah, dan saya pikir masalah ini telah dipecahkan sebelumnya berkali-kali sehingga harus ada semacam solusi lengkap untuk tugas tersebut.
Saya sedang melihat situs ini , tetapi sayangnya skripnya sangat samar sehingga saya tidak tahu bagaimana menggunakannya untuk tujuan saya, yaitu untuk membuat fungsi yang mengembalikan benar / salah.
Vary: User-Agent
respons Anda, jika tidak, proxy cache akan menyimpan satu versi dan mengirimkannya ke jenis browser lain. TetapiVary: User-Agent
membuat respons tidak bisa dijangkau dalam IE.Jawaban:
Menggunakan Regex (dari detectmobilebrowsers.com ):
Berikut adalah fungsi yang menggunakan regex gila-gilaan panjang dan komprehensif yang mengembalikan
true
ataufalse
nilai tergantung pada apakah atau tidak pengguna adalah browsing dengan ponsel.Bagi mereka yang ingin memasukkan tablet dalam tes ini (meskipun bisa dibilang, Anda tidak boleh), Anda dapat menggunakan fungsi berikut:
Jawaban Asli
Anda dapat melakukan ini dengan hanya menjalankan daftar perangkat dan memeriksa apakah ada yang
useragent
cocok dengan itu:Namun karena Anda percaya bahwa metode ini tidak dapat diandalkan, Anda dapat mengasumsikan bahwa perangkat apa pun yang memiliki resolusi 800x600 atau kurang adalah perangkat seluler juga, mempersempit target Anda bahkan lebih banyak (walaupun hari ini banyak perangkat seluler memiliki resolusi lebih besar daripada ini)
yaitu
Referensi:
sumber
|android|ipad|playbook|silk
ke regex pertama.Bagaimana tentang:
... karena smartphone biasanya mendukung properti ini dan browser desktop tidak.
EDIT: Seperti yang ditunjukkan @Gajus, solusi ini sekarang sudah usang dan tidak boleh digunakan ( https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation )
sumber
window.orientation
adalah properti yang sudah tidak digunakan lagi ( developer.mozilla.org/en-US/docs/Web/API/Window/orientation , compat.spec.whatwg.org/#dom-window-orientation ) yang dipilih oleh beberapa browser seluler untuk alasan yang tidak diketahui . Implement browser yang samawindow.screen.orientation
(yang juga didefinisikan di browser desktop). Saya hanya dapat berasumsi bahwawindow.orientation
dibiarkan di sana karena alasan warisan dan karenanya tidak boleh digunakan dalam aplikasi baru.Cara Penggunaan
Untuk memeriksa apakah pengguna menggunakan perangkat seluler tertentu:
Ref: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
Versi yang disempurnakan di github: https://github.com/smali-kazmi/detect-mobile-browser
sumber
any()
for ... in loop dariisMobile
anggota ORed ?Berikut ini adalah solusi sederhana dari sumber ketapel facebook
sumber
Datang ke sini mencari cara sederhana dan bersih untuk mendeteksi "perangkat layar sentuh", yang saya sebut ponsel dan tablet. Tidak menemukan pilihan bersih dalam jawaban saat ini tetapi berhasil mengikuti yang berikut yang juga dapat membantu seseorang.
Sunting : Untuk mendukung desktop dengan layar sentuh dan ponsel secara bersamaan Anda dapat menggunakan yang berikut ini:
sumber
touchstart|end|etc
.navigator.maxTouchPoints
(tanpams
awalan). Ada juga artikel MDN untuk diperiksa.Seperti yang telah banyak dinyatakan, mengandalkan target bergerak dari data agen pengguna bermasalah. Hal yang sama dapat dikatakan untuk menghitung ukuran layar.
Pendekatan saya dipinjam dari teknik CSS untuk menentukan apakah antarmuka sentuh:
Hanya menggunakan javascript (didukung oleh semua browser modern), kecocokan permintaan media dapat dengan mudah menyimpulkan apakah perangkat itu mobile .
sumber
Menurut artikel MDN tentang deteksi Browser menggunakan agen pengguna , disarankan untuk menghindari pendekatan ini jika mungkin dan menyarankan cara lain seperti deteksi fitur.
Namun, jika seseorang harus menggunakan agen pengguna sebagai alat untuk mendeteksi apakah perangkat itu mobile, mereka menyarankan:
Karenanya, one-liner ini sudah cukup:
const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");
[MEMPERBARUI]:
Seperti yang disarankan @ zenw0lf di komentar, menggunakan Ekspresi Reguler akan lebih baik:
const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
sumber
.includes
not sopport by IE-11Mobile
dalam string agen penggunaIf the device is large enough that it's not marked with “Mobi”, you should serve your desktop site (which, as a best practice, should support touch input anyway, as more desktop machines are appearing with touchscreens).
const isMobile = /Mobi/.test(window.navigator.userAgent)
Tidak ada solusi sempurna untuk mendeteksi apakah kode JS dijalankan pada browser seluler, tetapi dua opsi berikut ini akan berfungsi dalam banyak kasus.
Opsi 1: sniffing browser
Kode sniffing browser khusus ini adalah pustaka yang disebut isMobile .
Opsi 2: window.orientation
Tes jika
window.orientation
didefinisikan:Catatan
Tidak semua perangkat layar sentuh bersifat mobile dan sebaliknya. Jadi, jika Anda ingin mengimplementasikan sesuatu yang khusus untuk layar sentuh, Anda tidak boleh menguji apakah browser Anda dijalankan pada perangkat seluler tetapi apakah perangkat tersebut memiliki dukungan layar sentuh:
sumber
window.orientation
solusi Anda , tetapi dokumen mengatakan itu sudah usang! developer.mozilla.org/en-US/docs/Web/API/Window/orientationBerikut ini adalah solusi UserAgent yang lebih efisien daripada pertandingan ...
sumber
/iphone|etc/i.test(navigator.userAgent)
Untuk menambahkan lapisan kontrol tambahan, saya menggunakan penyimpanan HTML5 untuk mendeteksi apakah itu menggunakan penyimpanan seluler atau penyimpanan desktop. Jika browser tidak mendukung penyimpanan, saya memiliki array nama browser seluler dan saya membandingkan agen pengguna dengan browser di array.
Ini sangat sederhana. Inilah fungsinya:
sumber
sessionStorage.desktop
tidak ada di Safari, Chrome, atau Firefox (semua versi terbaru pada saat posting). Anda mendapatkan suara terbanyak, karena solusi Anda berjalan ke arah yang lebih baik daripada yang lain. Tapi jangan lupa untuk menggunakanvar mobile =
bukanmobile =
.Deteksi fitur jauh lebih baik daripada mencoba mencari tahu di mana perangkat Anda aktif dan sangat sulit untuk mengikuti perangkat baru yang keluar sepanjang waktu, perpustakaan seperti Modernizr memberi tahu Anda apakah fitur tertentu tersedia atau tidak.
sumber
Bagaimana dengan sesuatu yang seperti ini?
sumber
screen.width
saja? Menurut saya itu lebih dapat diandalkan daripadawindow.matchMedia
.Setelah elemen mendapatkan fokus, Anda segera mengaburkannya. Bootstrap-datepicker, yang merupakan komponen yang sangat populer dan terawat dengan baik dengan hampir 10.000 bintang di GitHub, menggunakan pendekatan ini:
https://github.com/uxsolutions/bootstrap-datepicker
Terima kasih untuk bantuan Tigger .
sumber
Cara yang sangat baik untuk mendeteksi perangkat seluler atau tablet adalah dengan melihat apakah browser dapat membuat acara sentuh.
Kode JavaScript Biasa:
Ini bekerja dengan baik untuk saya, tetapi mungkin ada masalah dengan perangkat laptop yang menyertakan layar sentuh.
Saya tidak yakin apakah Laptop layar sentuh akan terdeteksi sebagai perangkat seluler karena saya belum mengujinya.
sumber
Inilah solusi yang saya pikirkan ulang untuk masalah ini. Masih belum sempurna. Satu-satunya solusi yang benar adalah jika produsen perangkat mulai menganggap serius string agen pengguna "Mobile" dan "Tablet".
Apa yang terjadi ketika tablet Nexus 7 hanya memiliki string Android UA? Pertama, Mobile menjadi true, kemudian Tablet juga menjadi true, tetapi Tablet akan menghapus string UA Mobile dari tag tubuh.
CSS:
alert
baris ditambahkan untuk pengembangan. Konsol Chrome dapat meniru banyak perangkat genggam. Tes di sana.EDIT:
Hanya saja, jangan gunakan ini, gunakan deteksi fitur. Ada begitu banyak perangkat dan merek di luar sana yang menargetkan merek TIDAK PERNAH akan menjadi solusi yang tepat.
sumber
Saya menyarankan Anda memeriksa http://wurfl.io/
Singkatnya, jika Anda mengimpor file JS kecil:
Anda akan dibiarkan dengan objek JSON yang terlihat seperti:
(dengan asumsi Anda menggunakan Nexus 7, tentu saja) dan Anda akan dapat melakukan hal-hal seperti:
Ini yang kamu cari.
Penafian: Saya bekerja untuk perusahaan yang menawarkan layanan gratis ini. Terima kasih.
sumber
Inilah satu liner
sumber
Tergantung pada use case. Semua perangkat seluler memerlukan baterai. Jika yang Anda cari adalah menghitung daya tanpa menguras baterai gunakan Battery Status API :
Jika yang Anda cari adalah penggunaan presentasi
matchMedia
, yang mengembalikan nilai Boolean:Atau gabungkan mereka untuk pengalaman pengguna yang lebih baik di perangkat tablet.
sumber
Inilah solusi ECMAScript 6 (siap dengan TypeScript)
sumber
if
kondisi alih-alih memiliki seluruhcheck
variabel ini?Ada trik sederhana untuk mendeteksi apakah itu perangkat seluler atau bukan. Periksa apakah acara ontouchstart ada:
sumber
Saya telah menghadapi beberapa skenario di mana jawaban di atas tidak bekerja untuk saya. Jadi saya datang dengan ini. Mungkin bisa membantu seseorang.
Itu tergantung pada kasus penggunaan Anda. Jika Anda fokus pada penggunaan layar
screen.availWidth
, atau Anda dapat menggunakandocument.body.clientWidth
jika Anda ingin membuat berdasarkan dokumen.sumber
Yang terbaik harus:
Tapi seperti kata Yoav Barnea ...
Setelah 3 tes ini, saya harap var isMobile adalah ... ok
sumber
Inilah dia fungsi penuh
sumber
Anda juga dapat mengikuti tutorial ini untuk mendeteksi ponsel tertentu. Klik di sini .
sumber
Mobile
ke RX Andabagaimana dengan menggunakan "window.screen.width"?
atau
Saya kira ini adalah cara terbaik karena ada perangkat seluler baru setiap hari!
(walaupun saya pikir itu tidak didukung di browser lama, tetapi cobalah :))
sumber
Perhatikan bahwa Sebagian besar perangkat seluler gen yang lebih baru sekarang memiliki resolusi lebih besar dari 600x400. yaitu, iPhone 6 ....
Bukti tes: jalankan tulisan yang paling mutakhir dan terbaru di sini, dengan pemeriksaan opsional sekali berjalan seperti:
Entah bagaimana, hasil berikut dikembalikan pada Aplikasi Browser berikut. Spesifikasi: iPhone 6S, iOS 10.3.1.
Safari (terbaru): Terdeteksi sebagai seluler.
Chrome (terbaru): Tidak mendeteksi itu sebagai seluler.
SO, saya kemudian menguji saran dari Lanti ( https://stackoverflow.com/a/31864119/7183483 ), dan ternyata mengembalikan hasil yang tepat (mobile untuk semua perangkat iOS, dan desktop untuk Mac saya). Oleh karena itu, saya mulai mengeditnya sedikit karena akan menyala dua kali (untuk ponsel dan Tablet). Saya kemudian perhatikan ketika menguji pada iPad, bahwa itu juga kembali sebagai ponsel, yang masuk akal, karena Parameter itu Lantimenggunakan memeriksa OS lebih dari apa pun. Karena itu, saya cukup memindahkan pernyataan IF tablet di dalam cek seluler, yang akan mengembalikan seluler adalah cek Tablet negatif, dan tablet sebaliknya. Saya kemudian menambahkan klausa lain agar cek seluler kembali sebagai desktop / laptop, karena keduanya memenuhi syarat, tetapi kemudian memperhatikan bahwa browser mendeteksi merek CPU dan OS. Jadi saya menambahkan apa yang dikembalikan di sana sebagai bagian dari pernyataan if if gantinya. Singkatnya, saya menambahkan pernyataan peringatan lain jika tidak ada yang terdeteksi. Lihat di bawah, akan segera diperbarui dengan tes pada PC Windows 10.
Oh, dan saya juga menambahkan variabel 'debugMode', untuk dengan mudah beralih antara debug dan kompilasi normal.
Penafian: Kredit penuh untuk Lanti , juga bahwa ini tidak diuji pada Tablet Windows ... yang mungkin mengembalikan desktop / laptop, karena OSnya adalah Windows murni. Akan memeriksa setelah saya menemukan teman yang menggunakannya.
sumber
Ini hanyalah port es6 dari jawaban yang diterima yang saya gunakan dalam proyek saya. Perhatikan bahwa ini juga termasuk tablet.
sumber
Bagaimana dengan ini, ia memperluas jawaban di atas tetapi juga memeriksa ukuran layar
sumber
Menggunakan Regex (dari detectmobilebrowsers.com ):
sumber
Ini juga bisa menjadi solusi.
Jika Anda menggunakan kedua metode ini, Anda akan mendapatkan cara sempurna untuk mendeteksi perangkat yang berbeda.
sumber