Apakah ada cara kuat untuk mendeteksi apakah pengguna menggunakan perangkat seluler di jQuery atau tidak? Sesuatu yang mirip dengan atribut CSS @media? Saya ingin menjalankan skrip yang berbeda jika browser menggunakan perangkat genggam.
Fungsi jQuery $.browser
bukan yang saya cari.
javascript
jquery
mobile
browser-detection
superTidak berjudul
sumber
sumber
Jawaban:
Catatan editor: deteksi agen pengguna bukan teknik yang disarankan untuk aplikasi web modern. Lihat komentar di bawah jawaban ini untuk konfirmasi fakta ini. Disarankan untuk menggunakan salah satu jawaban lain menggunakan deteksi fitur dan / atau pertanyaan media.
Alih-alih menggunakan jQuery, Anda dapat menggunakan JavaScript sederhana untuk mendeteksinya:
Atau Anda dapat menggabungkan keduanya untuk membuatnya lebih mudah diakses melalui jQuery ...
Sekarang
$.browser
akan kembali"device"
untuk semua perangkat di atasCatatan:
$.browser
dihapus pada jQuery v1.9.1 . Tetapi Anda dapat menggunakan ini dengan menggunakan Kode plugin migrasi jQueryVersi yang lebih menyeluruh:
sumber
.This.Is.A.Bad.Idea.
Bagi saya kecil itu indah jadi saya menggunakan teknik ini:
Dalam file CSS:
Dalam file jQuery / JavaScript:
Tujuan saya adalah membuat situs saya "mobile-friendly". Jadi saya menggunakan CSS Media Query yang menampilkan / menyembunyikan elemen tergantung pada ukuran layar.
Misalnya, dalam versi seluler saya, saya tidak ingin mengaktifkan Kotak Suka Facebook, karena memuat semua gambar dan barang profil itu. Dan itu tidak baik untuk pengunjung seluler. Jadi, selain menyembunyikan elemen kontainer, saya juga melakukan ini di dalam blok kode jQuery (di atas):
Anda dapat melihatnya beraksi di http://lisboaautentica.com
Saya masih mengerjakan versi mobile, jadi masih belum terlihat sebagaimana mestinya, pada penulisan ini.
Perbarui oleh dekin88
Ada built-in JavaScript API untuk mendeteksi media. Daripada menggunakan solusi di atas, cukup gunakan yang berikut ini:
Dukungan Browser: http://caniuse.com/#feat=matchmedia
Keuntungan dari metode ini adalah tidak hanya lebih sederhana dan lebih pendek, tetapi Anda juga dapat menargetkan berbagai perangkat seperti smartphone dan tablet secara terpisah jika perlu tanpa harus menambahkan elemen dummy ke dalam DOM.
sumber
screen.width
Properti ini bersifat global. Tidak perlu secara sewenang-wenang menambahkan elemen ke DOM dan tidak perlu membawa pertanyaan media CSS. Plus, jika browser ada di desktop dan pengguna mengubah ukuran jendela,$is_mobile
tidak akan diperbarui.if( screen.width <= 480 ) { // is mobile }
width
atribut IIRC. Oleh karena itu, iPhone retina akan memilikiwidth
dari640
dan ketinggian960
di potret, danwidth
dari960
dan tinggi640
dalam lanskap.window.matchMedia
: developer.mozilla.org/en-US/docs/Web/API/Window.matchMediaMenurut Mozilla - Deteksi browser menggunakan agen pengguna :
Seperti ini:
Ini akan cocok dengan semua agen pengguna peramban seluler yang umum, termasuk Mozilla seluler, Safari, IE, Opera, Chrome, dll.
Perbarui untuk Android
EricL merekomendasikan pengujian
Android
sebagai agen pengguna juga, karena string agen pengguna Chrome untuk tablet tidak termasuk "Mobi" (versi ponsel melakukannya):sumber
/Mobi/i.test(navigator.userAgent)
, sebagai test () mengembalikan Boolean./Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
One-liner sederhana dan efektif:
Namun kode di atas tidak memperhitungkan casing untuk laptop dengan layar sentuh. Jadi, saya menyediakan versi kedua ini, berdasarkan solusi @Julian :
sumber
isMobile
Anda berikan kembalitrue
pada perangkat destop saya !! (Google Chrome v44.0)Apa yang Anda lakukan dengan ingin mendeteksi perangkat seluler menjadi sedikit terlalu dekat dengan konsep IMO "sniffing browser". Mungkin akan jauh lebih baik untuk melakukan beberapa deteksi fitur. Perpustakaan seperti http://www.modernizr.com/ dapat membantu dengan itu.
Misalnya, di mana garis antara ponsel dan non-seluler? Semakin hari semakin buram.
sumber
Ini bukan jQuery, tapi saya menemukan ini: http://detectmobilebrowser.com/
Ini menyediakan skrip untuk mendeteksi browser seluler dalam beberapa bahasa, salah satunya adalah JavaScript. Itu dapat membantu Anda dengan apa yang Anda cari.
Namun, karena Anda menggunakan jQuery, Anda mungkin ingin mengetahui koleksi jQuery.support. Ini adalah kumpulan properti untuk mendeteksi kemampuan browser saat ini. Dokumentasi ada di sini: http://api.jquery.com/jQuery.support/
Karena saya tidak tahu apa sebenarnya yang ingin Anda capai, saya tidak tahu yang mana yang paling bermanfaat.
Semua yang dikatakan, saya pikir taruhan terbaik Anda adalah mengarahkan atau menulis skrip yang berbeda ke output menggunakan bahasa sisi-server (jika itu pilihan). Karena Anda tidak benar-benar mengetahui kapabilitas peramban seluler x, melakukan pendeteksian, dan logika perubahan di sisi server akan menjadi metode yang paling dapat diandalkan. Tentu saja, semua itu adalah titik diperdebatkan jika Anda tidak dapat menggunakan bahasa sisi server :)
sumber
|android|ipad|playbook|silk
seperti yang dijelaskan di bagian about (ini sesuai desain)Terkadang ingin mengetahui perangkat merek mana yang digunakan klien untuk menampilkan konten yang spesifik untuk perangkat itu, seperti tautan ke toko iPhone atau pasar Android. Modernizer bagus, tetapi hanya menunjukkan kepada Anda kemampuan browser, seperti HTML5, atau Flash.
Berikut ini adalah solusi UserAgent saya di jQuery untuk menampilkan kelas yang berbeda untuk setiap jenis perangkat:
Solusi ini dari Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/
sumber
Menemukan solusi di: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .
Dan kemudian untuk memverifikasi apakah itu Mobile, Anda dapat menguji menggunakan:
sumber
Jika dengan "ponsel" maksud Anda "layar kecil," Saya menggunakan ini:
Pada iPhone Anda akan berakhir dengan window.screen.width 320. Di Android Anda akan berakhir dengan window.outerLebih dari 480 (meskipun itu bisa bergantung pada Android). iPad dan tablet Android akan mengembalikan angka seperti 768 sehingga mereka akan mendapatkan tampilan penuh seperti yang Anda inginkan.
sumber
Jika Anda menggunakan Modernizr , sangat mudah digunakan
Modernizr.touch
seperti yang disebutkan sebelumnya.Namun, saya lebih suka menggunakan kombinasi
Modernizr.touch
dan pengujian agen pengguna, hanya agar aman.Jika Anda tidak menggunakan Modernizr, Anda cukup mengganti
Modernizr.touch
fungsi di atas dengan('ontouchstart' in document.documentElement)
Perhatikan juga bahwa pengujian agen pengguna
iemobile
akan memberi Anda jangkauan yang lebih luas dari perangkat seluler Microsoft yang terdeteksi daripadaWindows Phone
.Lihat juga pertanyaan SO ini
sumber
TouchEvent.supported
.('ontouchstart' in window)
adalah alternatif untukModernizr.touch
juga, hacks.mozilla.org/2013/04/...|
daripada banyak pertandingan. Anda juga tidak perlutoLowerCase()
karena Anda memilikii
pengubah. Di sini:var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
Anda tidak dapat mengandalkan
navigator.userAgent
, tidak setiap perangkat mengungkapkan OS aslinya. Pada HTC saya misalnya, itu tergantung pada pengaturan ("menggunakan versi seluler" on / off). Di http://my.clockodo.com , kami hanya digunakanscreen.width
untuk mendeteksi perangkat kecil. Sayangnya, di beberapa versi Android ada bug dengan screen.width. Anda dapat menggabungkan cara ini dengan userAgent:sumber
Saya tahu pertanyaan ini memiliki banyak jawaban, tetapi dari apa yang saya lihat tidak ada yang mendekati jawaban seperti saya akan menyelesaikan ini.
CSS menggunakan lebar (Kueri Media) untuk menentukan gaya mana yang diterapkan pada dokumen web berdasarkan lebar. Mengapa tidak menggunakan lebar dalam JavaScript?
Misalnya di Kueri Media Bootstrap (Mobile First), ada 4 titik jepret / jeda:
Kita bisa menggunakan ini untuk menyelesaikan masalah JavaScript kita juga.
Pertama kita akan membuat fungsi yang mendapatkan ukuran jendela dan mengembalikan nilai yang memungkinkan kita untuk melihat ukuran perangkat apa yang melihat aplikasi kita:
Sekarang kita sudah memiliki fungsi yang diatur, kita dapat menyebutnya dan menyimpan nilai:
Pertanyaan Anda adalah
Sekarang kita memiliki informasi perangkat yang tersisa adalah pernyataan if:
Berikut adalah contoh tentang CodePen: http://codepen.io/jacob-king/pen/jWEeWG
sumber
Small Devices range from 768 to 991 pixels.
ini berartiwindow.innerWidth < 992
(991 disertakan) hal yang sama untuk 1199 seharusnya <1200 sebagai gantinyaDalam satu baris javascript:
Jika agen pengguna berisi 'Mobi' (sesuai MDN) dan ontouchstart tersedia maka itu kemungkinan merupakan perangkat seluler.
sumber
/Mobi/.test(navigator.userAgent)
...match
tidak melakukannya untuk sayaSaya terkejut bahwa tidak ada yang menunjukkan situs yang bagus: http://detectmobilebrowsers.com/ Ia telah membuat kode dalam berbagai bahasa untuk deteksi seluler (termasuk tetapi tidak terbatas pada):
Dan jika Anda perlu mendeteksi tablet juga, cukup periksa bagian Tentang untuk parameter RegEx tambahan.
sumber
Jika Anda tidak terlalu khawatir dengan tampilan kecil, Anda bisa menggunakan deteksi lebar / tinggi. Sehingga dengan demikian jika lebarnya di bawah ukuran tertentu, situs seluler terlempar ke atas. Ini mungkin bukan cara yang sempurna, tetapi mungkin akan menjadi cara termudah untuk mendeteksi beberapa perangkat. Anda mungkin perlu memasukkan yang khusus untuk iPhone 4 (resolusi besar).
sumber
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
Jika ditemukan bahwa pengecekan saja
navigator.userAgent
tidak selalu dapat diandalkan. Keandalan yang lebih besar dapat dicapai dengan juga memeriksanavigator.platform
. Modifikasi sederhana untuk jawaban sebelumnya tampaknya berfungsi lebih baik:sumber
Saya menyarankan Anda memeriksa http://wurfl.io/
Singkatnya, jika Anda mengimpor file JavaScript kecil:
Anda akan dibiarkan dengan objek JSON yang terlihat seperti:
(Itu 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.
sumber
Lihat pos ini , ia memberikan potongan kode yang sangat bagus untuk apa yang harus dilakukan ketika perangkat sentuh terdeteksi atau apa yang harus dilakukan jika acara touchstart dipanggil:
sumber
'ontouchstart' in document.documentElement
mungkin merupakan tes yang lebih baik untuk dukungan sentuh daripadawindow.Touch
. Bahkan lebih baik, gunakan Modernizr.js ( modernizr.com ) karena telah menghabiskan banyak pemikiran mencoba mendapatkan deteksi sentuh dengan benar. Anda dapat melihat kode deteksi sentuh mereka di modernizr.com/downloads/modernizr.js jika Anda melihat kode pengembangan dan mencari di "sentuh".Berikut adalah fungsi yang dapat Anda gunakan untuk mendapatkan jawaban yang benar / salah, apakah Anda menjalankan di browser seluler. Ya, ini mengendus-endus peramban, tetapi terkadang itulah yang Anda butuhkan.
sumber
for
untuk ini! + Anda lupa membuat RegExp. Ini yang lebih sederhana:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
Semua jawaban menggunakan agen pengguna untuk mendeteksi browser tetapi deteksi perangkat berdasarkan agen pengguna bukanlah solusi yang sangat baik, lebih baik untuk mendeteksi fitur seperti perangkat sentuh (di jQuery baru mereka menghapus
$.browser
dan menggunakan$.support
sebagai gantinya).Untuk mendeteksi ponsel Anda dapat memeriksa acara sentuh:
Diambil dari Apa cara terbaik untuk mendeteksi perangkat 'layar sentuh' menggunakan JavaScript?
sumber
true
pada PC desktop dengan layar sentuh. stucox.com/blog/you-cant-detect-a-touchscreenSaya akan menyarankan untuk menggunakan kombo string berikut, untuk memeriksa apakah jenis perangkat yang digunakan.
Sesuai string dokumentasi Mozilla
Mobi
direkomendasikan. Tetapi, beberapa tablet lama tidak mengembalikan true jika hanyaMobi
digunakan, maka kita harus menggunakanTablet
string juga.Demikian pula, untuk berada di sisi yang aman
iPad
daniPhone
string juga dapat digunakan untuk memeriksa tipe perangkat.Sebagian besar perangkat baru akan kembali
true
untukMobi
string saja.sumber
sumber
window.matchMedia("(pointer:coarse)").matches;
dari jawaban yang berbeda.Jawaban yang bagus terima kasih. Peningkatan kecil untuk mendukung ponsel Windows dan Zune:
sumber
if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
Gunakan ini:
Kemudian gunakan ini:
sumber
Fungsi sederhana berdasarkan http://detectmobilebrowser.com/
sumber
Jika Anda kebagian browser dan jika Anda mencoba untuk mendapatkan navigator.userAgent maka kita akan mendapatkan informasi browser seperti mengikuti
Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, seperti Gecko) Chrome / 64.0.3282.186 Safari / 537.36
Hal yang sama jika Anda lakukan di ponsel Anda akan mendapatkan pengikut
Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, seperti Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36
Setiap peramban seluler akan memiliki agen pengguna dengan string yang berisi "Seluler" Jadi saya menggunakan cuplikan di atas dalam kode saya untuk memeriksa apakah agen pengguna saat ini adalah web / seluler. Berdasarkan hasil saya akan melakukan perubahan yang diperlukan.
sumber
Saya menggunakan ini
sumber
Bagaimana dengan mobiledetect.net ?
Solusi lain tampaknya terlalu mendasar. Ini adalah kelas PHP yang ringan. Ia menggunakan string User-Agent dikombinasikan dengan header HTTP spesifik untuk mendeteksi lingkungan mobile. Anda juga dapat memanfaatkan Mobile Detect dengan menggunakan salah satu plugin pihak ke-3 yang tersedia untuk: WordPress, Drupal, Joomla, Magento, dll.
sumber
String agen pengguna tidak boleh dipercaya sendiri. Solusi di bawah ini akan berfungsi dalam semua situasi.
dan panggil fungsi ini:
sumber