Apa cara terbaik untuk mendeteksi perangkat seluler?

1652

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 $.browserbukan yang saya cari.

superTidak berjudul
sumber
7
Berikan URL seluler khusus untuk perangkat seluler. Ini adalah cara sebagian besar situs utama menangani perangkat seluler. Lihat m.google.com .
meagar
6
jQuery tidak, dan tidak bisa melakukan semuanya. Ini menyediakan lintas-browser DOM traversal dan manipulasi, animasi sederhana dan ajax antara browser, dan menciptakan kerangka kerja kerangka untuk membangun plugin. Perlu diketahui keterbatasan jQuery sebelum meminta secara khusus untuk solusi jQuery.
Yi Jiang
78
Agen pengguna terus menerus menggerakkan target, semua orang yang membaca posting ini harus sangat waspada terhadap penghirupan agen pengguna
Rob
46
Apa itu perangkat 'seluler'? Apakah ini perangkat yang mendukung sentuhan (termasuk Chrome Pixels dan Windows 8 laptop dengan mouse)? Apakah ini perangkat dengan layar kecil (bagaimana dengan retina iPads)? Apakah ini perangkat dengan CPU yang lambat? Atau perangkat dengan koneksi internet yang lambat? Tergantung pada apa yang ingin Anda lakukan, jawaban untuk pertanyaan ini akan bervariasi. Menargetkan resolusi layar atau sentuhan itu mudah. Jika Anda ingin menyajikan konten yang lebih kecil atau JS kurang intensif untuk beberapa perangkat, maka tidak ada peluru perak. Tes untuk window.navigator.connection dan kembali ke userAgent sniffing (jahat, buruk, keliru). 2 sen saya.
David Gilbertson
3
@Cole "Cole9" Johnson Poin saya tepatnya. 'Mobile' tampaknya digunakan sebagai istilah umum untuk sentuhan, CPU lambat, jaringan lambat, dan layar kecil. Tapi tak satu pun dari ini adalah asumsi sempurna. Saya percaya bahwa dengan mempertimbangkan ini secara individual akan menghasilkan produk yang lebih baik daripada merancang untuk beberapa konsep 'ponsel' yang tidak jelas. Karenanya saya mengajukan pertanyaan itu ke OP.
David Gilbertson

Jawaban:

2028

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:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

Atau Anda dapat menggabungkan keduanya untuk membuatnya lebih mudah diakses melalui jQuery ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Sekarang $.browserakan kembali "device"untuk semua perangkat di atas

Catatan: $.browserdihapus pada jQuery v1.9.1 . Tetapi Anda dapat menggunakan ini dengan menggunakan Kode plugin migrasi jQuery


Versi yang lebih menyeluruh:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}
permen-BlingBling
sumber
438
Agen pengguna mengendus adalah teknik deteksi yang sangat noddy, string agen pengguna adalah target bergerak konstan, mereka tidak boleh dipercaya sendiri. Orang-orang yang memberikan suara pada posting ini harus mempertimbangkan untuk meneliti lebih lanjut.
Rob
65
Salah satu masalah dengan mengendus hanya perangkat tertentu dari agen pengguna adalah bahwa Anda harus ingat untuk memperbarui deteksi Anda ketika perangkat baru keluar. Ini bukan solusi ideal.
ICodeForCoffee
11
Peramban Dolphin di android tidak mengirimkan string itu!
feeela
88
Jika pengguna Anda cukup licik atau pengembang cukup bodoh untuk mengubah string agen pengguna, siapa yang peduli tentang mereka ...
mattdlockyer
58
Jadi seberapa mobile Anda mempertimbangkan TV Android dengan mouse? Bagaimana mobile PC windows yang dapat berjalan dalam mode ganda (dengan keyboard, atau sebagai layar sentuh)? Jika Anda melakukan ini sebelum iPad ditemukan, maka Anda harus menambahkannya nanti ke semua situs Anda. OS berikutnya yang keluar: Ubuntu Mobile, FirefoxOS, Tizen ....This.Is.A.Bad.Idea.
FrancescoMM
535

Bagi saya kecil itu indah jadi saya menggunakan teknik ini:

Dalam file CSS:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

Dalam file jQuery / JavaScript:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now I can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

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):

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

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:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

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.

Gonçalo Peres
sumber
8
Apakah Anda tidak perlu # beberapa elemen SEBENARNYA DI DALAM DOM agar ini berfungsi?
Rimer
68
-1 screen.widthProperti 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_mobiletidak akan diperbarui.
merv
98
Mengapa tidak:if( screen.width <= 480 ) { // is mobile }
andrewrjones
23
@andrewrjones Perangkat retina menggandakan nilai widthatribut IIRC. Oleh karena itu, iPhone retina akan memiliki widthdari 640dan ketinggian 960di potret, dan widthdari 960dan tinggi 640dalam lanskap.
Cole Johnson
66
Anda baru saja ditemukan kembali window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
Paul Irish
236

Menurut Mozilla - Deteksi browser menggunakan agen pengguna :

Singkatnya, kami sarankan mencari string "Mobi" di mana saja di Agen Pengguna untuk mendeteksi perangkat seluler.

Seperti ini:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

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 Androidsebagai agen pengguna juga, karena string agen pengguna Chrome untuk tablet tidak termasuk "Mobi" (versi ponsel melakukannya):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}
QuasarDonkey
sumber
11
Terima kasih atas jawabannya! Saya lebih suka /Mobi/i.test(navigator.userAgent), sebagai test () mengembalikan Boolean.
arminrosu
5
Paradoksnya FireFox Mobile pada Samsung Galaxy Note 8 tidak mengembalikan Mobi dan tes akan kembali salah.
Eirinn
13
Artikel yang ditautkan menyebutkan: Jika perangkat cukup besar sehingga tidak ditandai dengan "Mobi", Anda harus melayani situs desktop Anda (yang, sebagai praktik terbaik, tetap harus mendukung input sentuhan, karena lebih banyak mesin desktop muncul dengan layar sentuh).
QuasarDonkey
2
Ini jauh lebih baik daripada solusi yang disarankan lainnya, itu harus menjadi jawaban yang diterima imo
RNobel
9
Derp. Terima kasih. Saya tidak dapat mengedit posting saya sebelumnya. Ini dia lagi:/Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
EricL
90

One-liner sederhana dan efektif:

function isMobile() { return ('ontouchstart' in document.documentElement); }

Namun kode di atas tidak memperhitungkan casing untuk laptop dengan layar sentuh. Jadi, saya menyediakan versi kedua ini, berdasarkan solusi @Julian :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
sequielo
sumber
29
Bagaimana dengan laptop Windows dengan layar sentuh?
Chris Cinelli
10
Fungsi kedua yang isMobileAnda berikan kembali truepada perangkat destop saya !! (Google Chrome v44.0)
Luke
12
Ini lebih merupakan metode yang didukung isTouchSup tidak benar-benar deteksi seluler.
Barkermn01
3
Tidak semua ponsel memiliki layar sentuh.
Andrew
@LukeP Apakah Anda menyegarkan saat berpindah dari emulasi seluler ke desktop?
Christian4423
81

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.

Bart
sumber
3
tetap saja, pengguna dapat menggunakan "jquery mobile" untuk perangkat tersebut, apa pun fitur yang didukung.
Sirber
9
Misalnya, masalah saya dengan "ponsel" "non-seluler" adalah fitur rollover saya, saya telah mengatur JS untuk mematikan fitur, hanya perlu mendeteksi
Sam Sussman
4
Namun, jika Anda ingin menawarkan aplikasi yang dapat diunduh khusus perangkat, ini dapat bermanfaat.
Benteng
3
Tergantung pada situasinya, saya mencari sesuatu yang akan memberi tahu saya jika pengguna menggunakan perangkat seluler, sehingga saya dapat menonaktifkan beberapa animasi berbasis JavaScript yang berat. Mengendus UA akan jauh lebih tepat daripada mencoba 'mendeteksi' kemampuan kinerja JavaScript dari browser pengguna.
Rick Suggs
9
Mobile vs non-mobile adalah perbedaan yang sangat besar, hanya menggunakan "deteksi fitur" adalah bodoh ketika Anda mencoba untuk memenuhi interaksi / ui untuk pengalaman mobile / desktop. Secara pribadi, saya berharap ada cara mudah (dan dapat diandalkan) untuk mendapatkan OS yang menjalankan browser saat ini
nbsp
66

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 :)

Ender
sumber
6
itu tidak mendukung iPad. Untuk mendukung iPad, cari ip (asah | od) dan "| ad" - mis. Ip (asah | od | iklan)
Jayson Ragasa
3
Saya baru saja mencoba javascript dari detectmobilebrowser.com/, dan ITU TIDAK berfungsi untuk iPad.
Milche Patern
3
@MilchePatern itu karena skripnya salah, gunakan iPad dan bukannya iPad, maka itu berfungsi, saya punya masalah di Samsung Tab saya, harus menggunakan Android iso android :)
Coen Damen
13
Ada versi jQuery di sana, dan itu berfungsi dengan baik, tetapi untuk deteksi tablet Anda harus menambahkan |android|ipad|playbook|silkseperti yang dijelaskan di bagian about (ini sesuai desain)
cprcrack
3
Ya, tablet bukan ponsel. Situs ini disebut peramban seluler dectect .
Felix Eve
47

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:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

Solusi ini dari Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

genkilab
sumber
Ini sangat bagus. Saya perlu menonaktifkan fungsi jQuery yang berjalan saat bergulir ketika menggunakan iPad atau ponsel Android dan karena berbagai perangkat memiliki lebar layar yang berbeda, ini adalah solusi sederhana. Terima kasih banyak.
Eric Allen
Satu-satunya masalah dengan menggunakan tes Android adalah bagaimana dengan sudut yang menggunakan agen pengguna android
MayorMonty
Jawaban yang bagus yang menunjukkan bahwa kita tidak harus menjadi fundamentalis pendeteksian fitur.
Fernando
44

Menemukan solusi di: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Dan kemudian untuk memverifikasi apakah itu Mobile, Anda dapat menguji menggunakan:

if(isMobile.any()) {
   //some code...
}
Gabriel
sumber
Sebuah solusi yang didasarkan pada agen pengguna bekerja dengan baik ketika Anda dapat yakin bahwa sub-string berhubungan langsung dengan jenis perangkat. yaitu iPad = iPad. Namun sekarang ada begitu banyak jenis perangkat (lebih dari 25.000) sehingga pendekatannya tidak cukup akurat untuk sebagian besar tujuan bisnis. Saya mendirikan proyek open source 51Degrees.com untuk memberikan alternatif yang andal dan tangguh. Ini akan berfungsi dalam JavaScript dan juga sisi server. Semua dokumentasi ada di sini ... 51degrees.com/support/documentation
James Rosewell
Saya menggunakan di atas juga, dan itu bekerja dengan baik untuk saya, tetapi sekarang tidak bekerja untuk Android 5.1 dan di atas, apakah ada yang berubah di Android 5.1 dan lebih besar?
Imran Qamer
if (isMobile.Android ()) {document.getElementById ("myAnchor"). setAttribute ("href", " google.com" ); }
Amranur Rahman
25

Jika dengan "ponsel" maksud Anda "layar kecil," Saya menggunakan ini:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

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.

Chris Moschini
sumber
1
mengapa 'window.screen.width' tidak cukup? Sepertinya Anda mengambil yang lebih kecil dari 'window.screen.width' atau 'window.outerWidth'. Mengapa Anda peduli dengan 'outerWidth'? Terima kasih sebelumnya atas jawabannya!
user1330974
16

Jika Anda menggunakan Modernizr , sangat mudah digunakanModernizr.touch seperti yang disebutkan sebelumnya.

Namun, saya lebih suka menggunakan kombinasi Modernizr.touchdan pengujian agen pengguna, hanya agar aman.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Jika Anda tidak menggunakan Modernizr, Anda cukup mengganti Modernizr.touchfungsi di atas dengan('ontouchstart' in document.documentElement)

Perhatikan juga bahwa pengujian agen pengguna iemobileakan memberi Anda jangkauan yang lebih luas dari perangkat seluler Microsoft yang terdeteksi daripada Windows Phone.

Lihat juga pertanyaan SO ini

PeterPan
sumber
Dan sama di Dart: TouchEvent.supported.
Kai Sellgren
('ontouchstart' in window)adalah alternatif untuk Modernizr.touchjuga, hacks.mozilla.org/2013/04/...
JVE999
Saya pikir modernizr adalah solusi hebat!
Bobby Russell
Anda harus benar-benar menggunakan RegEx |daripada banyak pertandingan. Anda juga tidak perlu toLowerCase()karena Anda memiliki ipengubah. Di sini: var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
oriadam
14

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 digunakan screen.widthuntuk mendeteksi perangkat kecil. Sayangnya, di beberapa versi Android ada bug dengan screen.width. Anda dapat menggabungkan cara ini dengan userAgent:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}
Ben H
sumber
8
Banyak ponsel memiliki lebar> 1000, terutama pada mode lansekap
oriadam
14

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:

  • Perangkat Ekstra Kecil berukuran 768 piksel dan di bawahnya.
  • Perangkat kecil berkisar antara 768 hingga 991 piksel.
  • Perangkat Sedang berkisar dari 992 hingga 1199 piksel.
  • Perangkat Besar berukuran 1.200 piksel ke atas.

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:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

Sekarang kita sudah memiliki fungsi yang diatur, kita dapat menyebutnya dan menyimpan nilai:

var device = getBrowserWidth();

Pertanyaan Anda adalah

Saya ingin menjalankan skrip yang berbeda jika browser menggunakan perangkat genggam.

Sekarang kita memiliki informasi perangkat yang tersisa adalah pernyataan if:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

Berikut adalah contoh tentang CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Jacob King
sumber
Ini bekerja paling baik untuk saya. Karena saya menggunakan bootstrap untuk beberapa halaman depan seluler, teknik ini bekerja dengan baik untuk mengalihkan otomatis dari maju non-seluler (non-bootstrap) ke halaman bootstrap. Tip: Saya menemukan satu masalah kecil pada alat IE11 F12: Saya emulasi dihidupkan di F12 Dev Tools untuk perangkat seluler dan mengalami kesulitan mendeteksi ukuran jendela. Saya telah mengukur ulang ukurannya di bawah titik istirahat xs tetapi mendeteksi itu sebagai md. Segera setelah saya mematikan meniru telepon dan me-refresh halaman, itu dengan benar mendeteksi ukuran dan dalam kode saya saya mengarahkan kembali ke halaman bootstrap.
Jeff Mergler
Itu yang saya cari sebentar. Terima kasih!
Pengembang
2
@ Jacobsing Anda mengatakan Small Devices range from 768 to 991 pixels.ini berarti window.innerWidth < 992(991 disertakan) hal yang sama untuk 1199 seharusnya <1200 sebagai gantinya
medBouzid
13

Dalam satu baris javascript:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

Jika agen pengguna berisi 'Mobi' (sesuai MDN) dan ontouchstart tersedia maka itu kemungkinan merupakan perangkat seluler.

James Westgate
sumber
1
harus /Mobi/.test(navigator.userAgent)... matchtidak melakukannya untuk saya
BananaAcid
12

Saya 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):

  • Apache
  • ASP
  • C #
  • IIS
  • JavaScript
  • NGINX
  • PHP
  • Perl
  • Python
  • Rel

Dan jika Anda perlu mendeteksi tablet juga, cukup periksa bagian Tentang untuk parameter RegEx tambahan.

Tablet Android, iPad, Api Kindle, dan PlayBook tidak terdeteksi oleh desain. Untuk menambahkan dukungan untuk tablet, tambahkan |android|ipad|playbook|silkke regex pertama.

Maksim Luzik
sumber
Bagi saya itu berhasil, bisakah Anda lebih spesifik kode apa yang Anda gunakan dan di mana tampaknya menjadi masalah?
Maksim Luzik
halaman itu adalah respons, dari semua tanggapan lainnya adalah salin tempel dari halaman itu
Rubén Ruíz
11

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).

MoDFoX
sumber
9

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:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}
dotTutorials
sumber
1
asumsi Anda berdasarkan localStorage cukup menarik, dapatkah Anda memberikan serangkaian perangkat yang didukung atau browser yang cocok dengan skrip Anda? Saya tertarik mencari solusi untuk pertanyaan ini , dan mencoba mendeteksi peramban tablet seluler memang bisa menjadi solusi yang menarik
Gruber
9

Jika ditemukan bahwa pengecekan saja navigator.userAgenttidak selalu dapat diandalkan. Keandalan yang lebih besar dapat dicapai dengan juga memeriksa navigator.platform. Modifikasi sederhana untuk jawaban sebelumnya tampaknya berfungsi lebih baik:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}
Tandai
sumber
5
Menurunkan secara acak jawaban tanpa meninggalkan komentar tidak boleh diizinkan. Paling-paling, ini tidak sopan.
Markus
8

Saya menyarankan Anda memeriksa http://wurfl.io/

Singkatnya, jika Anda mengimpor file JavaScript kecil:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Anda akan dibiarkan dengan objek JSON yang terlihat seperti:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(Itu dengan asumsi Anda menggunakan Nexus 7, tentu saja) dan Anda akan dapat melakukan hal-hal seperti:

if(WURFL.is_mobile) {
    //dostuff();
}

Ini yang kamu cari.

Penafian: Saya bekerja untuk perusahaan yang menawarkan layanan gratis ini.

Luca Passani
sumber
Wurfl gagal mendeteksi nexus7 dan iPad mini!
Jacob
Sesuatu yang tidak benar tentang Nexus 7. Apakah Anda yakin Anda tidak memiliki Nexus spoof dari string UA dalam pengaturan? Sejauh menyangkut iPad mini, ya, itu sangat sulit dibedakan dari iPad lain, tetapi masih diakui sebagai iPad, kan? Apakah Anda yang menurunkan posting saya?
Luca Passani
Tidak, mini ipad terdeteksi sebagai perangkat desktop
Jacob
7

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:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}
Safran Ali
sumber
'ontouchstart' in document.documentElementmungkin merupakan tes yang lebih baik untuk dukungan sentuh daripada window.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".
robocat
3
Deteksi sentuh membuat saya mendapat masalah, karena beberapa laptop Windows 8 baru mendeteksi sebagai layar sentuh di Chrome, yang mengarah ke hasil yang aneh.
JWarner
6

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.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}
Bukit Jonathon
sumber
1
Itu akan gagal mendeteksi banyak browser seluler, terutama Chrome mobile. Mungkin juga akan gagal pada beberapa dari: Opera Mobile, Firefox mobile, Opera Mini, berbagai browser ponsel Cina populer, dll.
robocat
Anda tidak perlu foruntuk ini! + Anda lupa membuat RegExp. Ini yang lebih sederhana:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
oriadam
6

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 $.browserdan menggunakan$.support sebagai gantinya).

Untuk mendeteksi ponsel Anda dapat memeriksa acara sentuh:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Diambil dari Apa cara terbaik untuk mendeteksi perangkat 'layar sentuh' menggunakan JavaScript?

jcubic
sumber
4
Sayangnya, ini tidak dapat diandalkan dan kembali truepada PC desktop dengan layar sentuh. stucox.com/blog/you-cant-detect-a-touchscreen
JustAMartin
1
Jangan lupa laptop dengan layar sentuh dan pengalaman peramban lengkap. :-)
Mike Kormendy
ini mungkin bukan cara untuk memeriksa apakah itu perangkat seluler atau bukan, tetapi karena nama fungsi Anda menyatakan itu sempurna untuk memeriksa perangkat yang mendukung sentuhan. +1 dari saya ;-)
Kathara
6

Saya akan menyarankan untuk menggunakan kombo string berikut, untuk memeriksa apakah jenis perangkat yang digunakan.

Sesuai string dokumentasi MozillaMobi direkomendasikan. Tetapi, beberapa tablet lama tidak mengembalikan true jika hanya Mobidigunakan, maka kita harus menggunakan Tabletstring juga.

Demikian pula, untuk berada di sisi yang aman iPaddan iPhonestring juga dapat digunakan untuk memeriksa tipe perangkat.

Sebagian besar perangkat baru akan kembali trueuntuk Mobistring saja.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}
Sanjay Joshi
sumber
3
Saya harus menambahkan "android" di sana untuk dapat bekerja di tablet. Saya harus men-tweak tapi saya suka pendekatannya.
Andy
6

Anda dapat menggunakan kueri media untuk dapat menanganinya dengan mudah.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}
vin
sumber
Saya suka pendekatan ini, saya angkat window.matchMedia("(pointer:coarse)").matches;dari jawaban yang berbeda.
Jason Lydon
6

Jawaban yang bagus terima kasih. Peningkatan kecil untuk mendukung ponsel Windows dan Zune:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}
Victor Juri
sumber
Saya akan mengatakan ini adalah perbaikan paling sederhana (mungkin bukan yang terbaik) jika Anda mencoba menangani acara hover / dragging untuk perangkat seluler. Saya menggunakan sesuatu seperti ini untuk membuat boolean "isMobile" yang kemudian diperiksa untuk setiap acara hover / mouseover. Begitulah dua sen saya. Menambahkan lebih banyak perpustakaan atau kode yang membutuhkan interaksi pengguna tidak terlalu masuk akal bagi saya; koreksi saya jika saya salah.
MeanMatt
3
Karena Anda menggunakan ekspresi reguler, sebenarnya gunakan:if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
foobarbecue
5

Gunakan ini:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Kemudian gunakan ini:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}
NCoder
sumber
5

Fungsi sederhana berdasarkan http://detectmobilebrowser.com/

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));
}
lucasl
sumber
5
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

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.

Vishnu Prasanth G
sumber
4

Saya menggunakan ini

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}
Yene Mulatu
sumber
4

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.

Luca Mori Polpettini
sumber
Karena pertanyaannya untuk jQuery?
Craicerjack
3

String agen pengguna tidak boleh dipercaya sendiri. Solusi di bawah ini akan berfungsi dalam semua situasi.

function isMobile(a) {
  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
}

dan panggil fungsi ini:

isMobile(navigator.userAgent || navigator.vendor || window.opera)
kaxi1993
sumber