Mendeteksi peramban seluler

889

Saya mencari fungsi yang mengembalikan nilai boolean jika pengguna memiliki browser seluler atau tidak.

Saya tahu bahwa saya bisa menggunakan navigator.userAgentdan 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.

ave
sumber
6
Terkait: stackoverflow.com/questions/3514784/… .
Frédéric Hamidi
2
Coba baca ini. stackoverflow.com/questions/743129/…
KyelJmD
5
@Trustmaster: Benar-benar tidak mau. Menyajikan JS yang berbeda ke browser yang berbeda berarti Anda harus menambahkan Vary: User-Agentrespons Anda, jika tidak, proxy cache akan menyimpan satu versi dan mengirimkannya ke jenis browser lain. Tetapi Vary: User-Agentmembuat respons tidak bisa dijangkau dalam IE.
bobince
17
@ave: Apa yang Anda coba lakukan dengan mendeteksi peramban "seluler"? Perbedaannya sangat diperdebatkan di dunia tablet dan perangkat komputasi hybrid saat ini. Apakah Anda ingin mendeteksi layar kecil, dan menyajikan UI yang berbeda dalam kasus itu? Apakah Anda ingin mendeteksi konektivitas bandwidth rendah? Apakah Anda ingin mendeteksi antarmuka sentuh?
bobince
2
Jadi saya telah memperbarui jawaban saya untuk menggunakan metode javascript detectmobilebrowsers.com tetapi mengembalikan nilai boolean jika ada yang masih membutuhkan ini. ( untuk berjaga-jaga ). Selamat Mendeteksi :)
Michael Zaporozhets

Jawaban:

1318

Menggunakan Regex (dari detectmobilebrowsers.com ):

Berikut adalah fungsi yang menggunakan regex gila-gilaan panjang dan komprehensif yang mengembalikan trueatau falsenilai tergantung pada apakah atau tidak pengguna adalah browsing dengan ponsel.

window.mobileCheck = function() {
  let check = false;
  (function(a){if(/(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

Bagi mereka yang ingin memasukkan tablet dalam tes ini (meskipun bisa dibilang, Anda tidak boleh), Anda dapat menggunakan fungsi berikut:

window.mobileAndTabletCheck = function() {
  let check = false;
  (function(a){if(/(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|android|ipad|playbook|silk/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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

Jawaban Asli

Anda dapat melakukan ini dengan hanya menjalankan daftar perangkat dan memeriksa apakah ada yang useragentcocok dengan itu:

  function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

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

  function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
  }

Referensi:

Michael Zaporozhets
sumber
25
Hai, saya baru saja mengunjungi tautan detectmobilebrowsers.com di iPad 3 saya, iOS 6.1.2, dan dikatakan "Tidak ada peramban seluler yang terdeteksi".
Richard Lovejoy
49
@ RichardLovejoy saat membangun situs, iPad umumnya tidak dianggap sebagai ponsel.
Michael Zaporozhets
42
Dari halaman tentang : Tablet Android, iPad, Kindle Fires, dan PlayBooks tidak terdeteksi oleh desain. Untuk menambahkan dukungan untuk tablet, tambahkan |android|ipad|playbook|silkke regex pertama.
Gras Double
13
Google TV juga Android. Apa yang mendefinisikan ponsel? Ukuran layar ? Sentuh? deviceOrientation? Ketika saya mendesain itu lebih merupakan pertanyaan tentang mousehover atau tidak, bouton besar atau tautan kecil. Jadi, untuk saat ini, saya menjalankan dengan "if (Modernizr.touch)" :)
molokoloco
31
Aduh, seluruh ide agen pengguna ini mengerikan dan benar-benar perlu dihentikan. Kami benar-benar harus berhenti mengizinkan klien untuk bertarung melawan arus dan hanya bertahan dengan pertanyaan media. Jika mereka ingin melakukan pengalihan berdasarkan skala untuk halaman tertentu, maka cukup periksa rentang kueri media tertentu melalui JS yaitu tylergaw.com/articles/reacting-to-media-queries-in-javascript
markyzm
324

Bagaimana tentang:

if (typeof window.orientation !== 'undefined') { ... }

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

yoav barnea
sumber
14
ini sebenarnya super unik dan mengagumkan, apakah Anda keberatan jika saya menambahkannya ke jawaban saya?
Michael Zaporozhets
77
Ini mungkin tidak akan bekerja lama. 1) Tablet dapat memiliki ukuran layar yang layak, Anda ingin mereka menampilkan situs web desktop penuh tetapi mereka akan memiliki properti ini 2) Windows 8 ada di sini dan dengan itu sekelompok laptop dengan layar sentuh dan layar yang berputar.
Dave Hilditch
10
Adapun poin pertama Anda tentang Tablet dengan ukuran layar yang layak - saya pikir Anda bisa membuat argumen yang sama untuk semua solusi lain juga (tablet dengan layar besar yang dilacak sebagai layar kecil). Lagi pula idenya di sini adalah untuk mencari properti yang telah dibagikan oleh perangkat kecil alih-alih menjaga kode lama dan menambahkan regex dengan setiap perangkat / vesion / model baru yang akan datang. Saya pikir deteksi perangkat adalah milik masa lalu dan hari ini kita perlu fokus pada deteksi fitur. sekali lagi saya akan senang di sini tentang properti yang lebih cocok dalam hal ini ...
yoav barnea
2
Cintai itu dan bekerja dengan sempurna, terima kasih. Untuk solusi saya, saya hanya setelah sederhana.
Bojangles
40
window.orientationadalah 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 sama window.screen.orientation(yang juga didefinisikan di browser desktop). Saya hanya dapat berasumsi bahwa window.orientationdibiarkan di sana karena alasan warisan dan karenanya tidak boleh digunakan dalam aplikasi baru.
Gajus
115
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) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Cara Penggunaan

if( isMobile.any() ) alert('Mobile');

Untuk memeriksa apakah pengguna menggunakan perangkat seluler tertentu:

if( isMobile.iOS() ) alert('iOS');

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

Mudaser Ali
sumber
Mengapa tidak membuat any()for ... in loop dari isMobileanggota ORed ?
SomeShinyObject
@ChristopherW saya telah membuat plugin dan kode yang dimodifikasi seperti yang Anda sarankan
Mudaser Ali
2
Mungkin menggerakkan iOS di depan BlackBerry () hanya untuk menempatkan kasus yang lebih umum terlebih dahulu dan membiarkan bailout awal menyimpan beberapa pemrosesan tambahan?
Rob_vH
2
@Rob_vH saya telah memasukkan kode ini ke github ( github.com/smali-kazmi/detect-mobile-browser ) dengan beberapa fitur lanjutan; Anda terbuka untuk mengirim saran ke sana juga
Mudaser Ali
1
@AkarshSatija Apakah kinerja turun dari 5 pemeriksaan regex yang benar-benar berdampak pada salah satu aplikasi Anda? Saya akan sangat terkejut jika itu terjadi. Optimalisasi prematur dapat membuang-buang waktu ...
trusktr
68

Berikut ini adalah solusi sederhana dari sumber ketapel facebook

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  /* your code here */
}
Santhosh
sumber
Bagus. Sangat berguna dalam situasi tertentu
Chuck Le Butt
Berguna untuk kasus mendeteksi perangkat tempat aplikasi seluler dapat diinstal. Anda tidak peduli dengan peramban. Hanya perangkat / OS.
Charlie Reitzel
31

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.

var touchDevice = ('ontouchstart' in document.documentElement);

Sunting : Untuk mendukung desktop dengan layar sentuh dan ponsel secara bersamaan Anda dapat menggunakan yang berikut ini:

var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
Tigger
sumber
9
Bagaimana jika monitor desktop mendukung sentuhan?
Anton Kuzmin
@HappyCoder Saya percaya itu tergantung pada OS untuk memberi tahu browser ketika layar sentuh pada desktop aktif. Jadi, ya cek ini harus tetap valid.
Tigger
(+1), namun, desktop saya yang saya gunakan sekarang memiliki layar sentuh, dan itu tidak selalu konsisten untuk touchstart|end|etc.
Cody
1
Bootepap datepicker menggunakan yang berikut ini: if (window.navigator.msMaxTouchPoints || 'ontouchstart' dalam dokumen) {this.input.blur (); }
JT Taylor
1
@ JTTaylor Sepertinya Microsoft merekomendasikan navigator.maxTouchPoints (tanpa msawalan). Ada juga artikel MDN untuk diperiksa.
Tigger
20

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 .

function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if(match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}
gsxrboy73
sumber
6
Bagaimana dengan laptop dengan layar sentuh yang diaktifkan?
Maxim
6
Saya akan memeriksa! MatchMedia ("(penunjuk: denda)"). Cocok dengan saya. ("Tidak ada mouse yang terhubung", bukan "memiliki layar sentuh".
Sora2455
Ini berfungsi sedangkan skrip terakhir saya akan diakali oleh orang-orang yang menggunakan fitur zoom browser (mis. Seorang pria yang saya ajak bicara di layar 13 "dengan 4K yang turun menjadi 1080p dan masih harus menggunakan zoom). Bekerja pada iPhone saya (Safari / Firefox) dan perangkat Android (Waterfox / Chrome / "Browser") .Tentu jauh lebih dapat diandalkan daripada semua jawaban yang lebih tinggi.
John
tidak mendeteksi FireFox fennec di Android yang saya tambahkan dengan navigator.userAgent.toLowerCase (). indexOf ('fennec')> -1 (mungkin bukan suplemen terbaik ..)
StayCool
2
Selain itu Anda dapat menguji properti hover: untuk smartphone dan layar sentuh @media (hover: tidak ada) dan (pointer: kasar)
Batailley
16

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:

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

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)

TheDarkIn1978
sumber
.includesnot sopport by IE-11
Pasha Oleynik
1
@PashaOleynik, sebuah polyfill dapat memperbaikinya
Maxim
Tablet Nexus 7 dengan Android tidak ada Mobiledalam string agen pengguna
Alex Sorokoletov
@AlexSorokoletov Juga untuk artikel MDNIf 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).
TheDarkIn1978
1
Saya pikir ini akan bekerja di mana saja tanpa polyfill: const isMobile = /Mobi/.test(window.navigator.userAgent)
zenw0lf
14

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

!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);

alert(isMobile.any ? 'Mobile' : 'Not mobile');

Kode sniffing browser khusus ini adalah pustaka yang disebut isMobile .


Opsi 2: window.orientation

Tes jika window.orientationdidefinisikan:

var isMobile = window.orientation > -1;
alert(isMobile ? 'Mobile' : 'Not mobile');


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:

var hasTouchscreen = 'ontouchstart' in window;
alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen');

John Slegers
sumber
Pendekatan orientasi benar-benar bagus! ))
Maxim
1
Saya suka window.orientationsolusi Anda , tetapi dokumen mengatakan itu sudah usang! developer.mozilla.org/en-US/docs/Web/API/Window/orientation
skwidbreth
3
Pendekatan orientasi TIDAK baik karena Windows 8 dan yang lebih tinggi dapat mengubah orientasi.
Heitor
Windows 8 dan yang lebih baru berfokus pada menambahkan dukungan untuk ponsel tetapi juga hibrida (laptop yang dapat dikonversi menjadi bantalan besar) yang mengapa orientasi gagal sebagai metode deteksi bahkan jika moz tidak menyebutnya sebagai usang.
Jeff Clayton
Ini dari Win 7 dengan Graphical Software yang terinstal dapat mengubah orientasi tetapi tanyakan pada diri Anda pertanyaan, siapa yang dapat di Desktop / Laptop menggunakan orientasi layar lain seperti Portrait alih-alih Landscape dan menggunakan i bahkan lebih dari 1 menit. Tidak ada !!! Mengubah orientasi pada Desktop berarti Anda akan mulai membaca karakter di layar Anda dari bawah ke atas.
GirlCode
11

Berikut ini adalah solusi UserAgent yang lebih efisien daripada pertandingan ...

function _isMobile(){
    // if we want a more complete list use this: http://detectmobilebrowsers.com/
    // str.test() is more efficent than str.match()
    // remember str.test is case sensitive
    var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
         (navigator.userAgent.toLowerCase());
    return isMobile;
}
JeffJak
sumber
7
metode pengujian tidak peka terhadap huruf besar-kecil, tetapi regex Anda. Anda bisa menandai regex yang tidak sensitif dengan huruf "i" di akhir dan lakukan/iphone|etc/i.test(navigator.userAgent)
xec
11

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
    var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile']; 
    for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;

    // nothing found.. assume desktop
    return false;
}
Rasmus Søborg
sumber
3
Saya belum menguji di ponsel, tetapi sessionStorage.desktoptidak 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 menggunakan var mobile =bukan mobile =.
shuckster
3
Juga ide yang bagus untuk tidak menggunakan indexOf dengan browser lama yang masih ada yang tidak mendukung metode itu, atau menggunakan polyfill. Tidak perlu menggunakan toLowerCase pada daftar nilai huruf kecil, juga tidak perlu untuk melakukannya jika Anda menjalankan /ipad| iphone |etc/i.test(navigator.userAgent) alih-alih loop lambat yang Anda miliki di sana.
Jeffrey Gilbert
10

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.

zadubz
sumber
18
Anda telah menjawab pertanyaan lain selain yang diminta. Daripada "bagaimana saya bisa mendeteksi ponsel?", Anda sudah menjawab "bagaimana saya bisa mendeteksi fitur tertentu?". Tidak semua deteksi perangkat untuk deteksi fitur. Bagaimana jika kami ingin mendapatkan statistik tentang perangkat? Maka tidak, "deteksi fitur" tidak "jauh lebih baik dari [mencari tahu perangkat]".
Jonathan Allard
1
Ini bukan jawabannya, tetapi lebih dari sekadar komentar. Pertanyaannya adalah: mengapa Anda ingin mendeteksi browser dan Anda mungkin ingin mengetahuinya karena (kurangnya) sentuhan saja. Desain web responsif sudah mencukupi dalam sebagian besar atau tidak semua kasus.
twicejr
8

Bagaimana dengan sesuatu yang seperti ini?

if(
    (screen.width <= 640) || 
    (window.matchMedia && 
     window.matchMedia('only screen and (max-width: 640px)').matches
    )
  ){
   // Do the mobile thing
}
stujo
sumber
Kenapa tidak pakai saja screen.widthsaja? Menurut saya itu lebih dapat diandalkan daripada window.matchMedia.
John Slegers
Poin bagus John, saya tidak dapat mengingat dengan tepat apa yang saya pikirkan pada saat itu, sepertinya tidak mungkin (melihat sekarang) bahwa klausa kedua akan kembali benar jika yang pertama salah. Pasti ada beberapa alasan saya menambahkannya.
stujo
Kebanyakan programmer yang baik merasa malu ketika melihat kode yang mereka tulis sendiri setahun sebelumnya. Mereka yang tidak hanya belum tumbuh sebagai programmer ;-)
John Slegers
4
Resolusi jendela tidak ada hubungannya dengan apakah browser ada di perangkat seluler atau tidak. Sebagai contoh, banyak browser desktop dijalankan di windows non-layar penuh. Jika Anda menyajikan UI yang dirancang untuk layar genggam ke browser tersebut, pengguna mereka akan memiliki pengalaman yang membuat frustrasi.
ʇsәɹoɈ
1
@ JohnSlegers - Saya sebagian besar malu dengan pertanyaan Google dan menemukan jawaban saya sendiri di stackoverflow. lagi dan lagi. Saya sendiri berada di tumpukan-overflow konstan
vsync
7

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:

if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
    this.input.blur();
}

https://github.com/uxsolutions/bootstrap-datepicker

Terima kasih untuk bantuan Tigger .

JT Taylor
sumber
7

Cara yang sangat baik untuk mendeteksi perangkat seluler atau tablet adalah dengan melihat apakah browser dapat membuat acara sentuh.

Kode JavaScript Biasa:

function isMobile() {
   try{ document.createEvent("TouchEvent"); return true; }
   catch(e){ return false; }
}

if (isMobile()) {
   # do whatever you wanna do!
}

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.

Neo Morina
sumber
5
Laptop layar sentuh akan terdeteksi sebagai perangkat seluler. Serta monitor layar sentuh untuk desktop. Percaya atau tidak, Anda juga akan mengalami masalah jika Anda menggunakan perangkat layar sentuh untuk RDP ke perangkat lain yang tidak memiliki layar sentuh.
blissfool
@blissfool kurasa ini bukan cara yang tepat untuk mendeteksi perangkat seluler.
Neo Morina
Sayangnya tidak ada. Tapi, itu mungkin masih menjadi opsi yang layak untuk kasus penggunaan yang sangat terbatas.
blissfool
jangan pernah menulis kode, yang didasarkan pada pengecualian, yang pasti akan dilemparkan dalam kasus apa pun ...
Pablo
@ Sivic hanya dilemparkan ketika TouchEvent tidak ada dan kode di atas menangkapnya dan mengembalikan false. Ini tidak terjadi pada Ponsel atau Tablet atau perangkat Layar Sentuh lainnya.
Neo Morina
5

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

window.onload = userAgentDetect;
function userAgentDetect() {
  if(window.navigator.userAgent.match(/Mobile/i)
  || window.navigator.userAgent.match(/iPhone/i)
  || window.navigator.userAgent.match(/iPod/i)
  || window.navigator.userAgent.match(/IEMobile/i)
  || window.navigator.userAgent.match(/Windows Phone/i)
  || window.navigator.userAgent.match(/Android/i)
  || window.navigator.userAgent.match(/BlackBerry/i)
  || window.navigator.userAgent.match(/webOS/i)) {
    document.body.className += ' mobile';
    alert('True - Mobile - ' + navigator.userAgent);
  } else {
    alert('False - Mobile - ' + navigator.userAgent);
  }
  if(window.navigator.userAgent.match(/Tablet/i)
  || window.navigator.userAgent.match(/iPad/i)
  || window.navigator.userAgent.match(/Nexus 7/i)
  || window.navigator.userAgent.match(/Nexus 10/i)
  || window.navigator.userAgent.match(/KFAPWI/i)) {
    document.body.className -= ' mobile';
    document.body.className += ' tablet';
    alert('True - Tablet - ' + navigator.userAgent);
  } else {
    alert('False - Tablet - ' + navigator.userAgent);
  }
}

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:

body.tablet { background-color: green; }
body.mobile { background-color: red; }

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

Lanti
sumber
4

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

Singkatnya, jika Anda mengimpor file JS 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"
}

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

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

Ini yang kamu cari.

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

Luca Passani
sumber
1
Dan bagaimana ini tidak mengenali safari di iphone?
Amyth
Bisakah Anda memperluas pada browser apa yang Anda gunakan (string UA yang tepat akan sempurna), data apa yang Anda dapatkan dan apa yang Anda harapkan?
Luca Passani
Saya juga mencoba wurfl, saya menggunakan iPhone 5C yang menjalankan iOS 11.2. Ini tidak mengenali Safari sebagai peramban seluler. Saya berharap untuk menggunakan "is_mobile": true dan kemudian "form_factor": Smartphone dan tidak kembali juga.
Mike Wells
Saya harus beralih ke guru Data Seluler di perusahaan dan mereka memberi tahu saya bahwa OS 11.2 tidak berjalan pada 5C. Perangkat terendah adalah 5S. Jadi ada yang tidak beres dengan apa yang Anda tulis. Jangan ragu untuk menghubungi ScientiaMobile offline untuk memverifikasi di mana putuskan sambungan mungkin. Terima kasih
Luca Passani
4

Inilah satu liner

function isMobile() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
Rick Enciso
sumber
3

Tergantung pada use case. Semua perangkat seluler memerlukan baterai. Jika yang Anda cari adalah menghitung daya tanpa menguras baterai gunakan Battery Status API :

navigator.getBattery().then(battery => {
  battery.charging ? 'charging' : 'not charging';
});

Jika yang Anda cari adalah penggunaan presentasi matchMedia, yang mengembalikan nilai Boolean:

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Atau gabungkan mereka untuk pengalaman pengguna yang lebih baik di perangkat tablet.

Josh Habdas
sumber
Perhatikan bahwa API Status Baterai sedang dihapus dari browser.
Sora2455
API Status Baterai dihapus dari Firefox tetapi tetap menjadi W3C Calon Rekomendasi sejak Juli 2016 , terus berfungsi di browser populer dan berguna dalam membentuk pengalaman.
Josh Habdas
2

Inilah solusi ECMAScript 6 (siap dengan TypeScript)

public isMobile(): boolean {
  let check = false;
  ((a => {
      if (/(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))) check = true;
      }))(navigator.userAgent || navigator.vendor);
  return check;
 }
0x1ad2
sumber
mengapa tidak mengembalikan saja ifkondisi alih-alih memiliki seluruh checkvariabel ini?
Vic
2

Ada trik sederhana untuk mendeteksi apakah itu perangkat seluler atau bukan. Periksa apakah acara ontouchstart ada:

function isMobile()
{
    return "ontouchstart" in window;
}
Martin Wantke
sumber
3
Tidak akan bekerja dengan laptop dan dekstops dengan monitor layar sentuh. Juga akan menjadi masalah dengan Surface pc pc hybrid. Kurang dari masalah dengan desktop tetapi ada lebih banyak laptop layar sentuh yang dijual hari ini.
blissfool
2

Saya telah menghadapi beberapa skenario di mana jawaban di atas tidak bekerja untuk saya. Jadi saya datang dengan ini. Mungkin bisa membantu seseorang.

if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
 || screen.availWidth < 480){
//code for mobile
}

Itu tergantung pada kasus penggunaan Anda. Jika Anda fokus pada penggunaan layar screen.availWidth, atau Anda dapat menggunakan document.body.clientWidthjika Anda ingin membuat berdasarkan dokumen.

Thyagarajan C
sumber
1

Yang terbaik harus:

var isMobile = (/Mobile/i.test(navigator.userAgent));

Tapi seperti kata Yoav Barnea ...

// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;

Setelah 3 tes ini, saya harap var isMobile adalah ... ok

molokoloco
sumber
> Firefox mobile di android sepertinya tidak memiliki "'orientasi' di jendela"
molokoloco
1
Maaf .. ok buat saya itu berfungsi dengan baik seperti itu sekarang. "if (Modernizr.touch) / * ... * /" dan terus ...
molokoloco
Hanya ingin tahu bagaimana Modernizr.touch akan bekerja ketika pada perangkat desktop layar sentuh.
B2K
Untuk membuatnya lebih elegan, Anda harus membuat semua kode hanya dalam satu blok if-else if-else if.
Heitor
1

Inilah dia fungsi penuh

function isMobile(){
    return (/(android|bb\d+|meego).+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|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/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||navigator.vendor||window.opera).substr(0,4)))
}

jQuery.noConflict();
jQuery(document).ready(function(){
    if(isMobile()) alert("Mobile"); else alert("Not Mobile");
});
David Latty
sumber
.substr (0,4) mengembalikan 4 huruf pertama. Bagaimana cara mendeteksi "android. + Mobile"?
raacer
1
@raacer sebenarnya ada dua regex dalam jawaban (keduanya pada baris yang sama) - yang pertama memeriksa seluruh string UA, dan mencari Android, ponsel, dll. Sedangkan yang kedua hanya memeriksa terhadap 4 karakter pertama dari UA .
JackW
1
//true / false
function isMobile()
{
   return (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ); 
}

Anda juga dapat mengikuti tutorial ini untuk mendeteksi ponsel tertentu. Klik di sini .

gtzinos
sumber
Silakan tambahkan Mobileke RX Anda
oriadam
1

bagaimana dengan menggunakan "window.screen.width"?

if (window.screen.width < 800) {
// do something
}

atau

if($(window).width() < 800) {
//do something
}

Saya kira ini adalah cara terbaik karena ada perangkat seluler baru setiap hari!

(walaupun saya pikir itu tidak didukung di browser lama, tetapi cobalah :))

Ahmad Yousef
sumber
1
Apa itu landscape?
Erick Voodoo
1
Ini tidak terlalu berguna untuk skenario tertentu. Jika peramban desktop diubah ukurannya, peramban seluler mungkin terdeteksi secara tidak benar
toing_toing
PC pada dasarnya berbeda dari perangkat seluler pada kegunaan, jawaban yang mengerikan !!
Heitor
1

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:

(function(a){
    window.isMobile = (/(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)))
})(navigator.userAgent||navigator.vendor||window.opera);

alert("This browser was found to be a % browser.", window.isMobile ? 'mobile' : 'desktop');

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.

function userAgentDetect() {
    let debugMode = true;
    if(window.navigator.userAgent.match(/Mobile/i)
        || window.navigator.userAgent.match(/iPhone/i)
        || window.navigator.userAgent.match(/iPod/i)
        || window.navigator.userAgent.match(/IEMobile/i)
        || window.navigator.userAgent.match(/Windows Phone/i)
        || window.navigator.userAgent.match(/Android/i)
        || window.navigator.userAgent.match(/BlackBerry/i)
        || window.navigator.userAgent.match(/webOS/i)) {
        if (window.navigator.userAgent.match(/Tablet/i)
            || window.navigator.userAgent.match(/iPad/i)
            || window.navigator.userAgent.match(/Nexus 7/i)
            || window.navigator.userAgent.match(/Nexus 10/i)
            || window.navigator.userAgent.match(/KFAPWI/i)) {
            window.deviceTypeVar = 'tablet';
            if (debugMode === true) {
                alert('Device is a tablet - ' + navigator.userAgent);
            }
        } else {
            if (debugMode === true) {
                alert('Device is a smartphone - ' + navigator.userAgent);
            };
            window.deviceTypeVar = 'smartphone';
        }
    } else if (window.navigator.userAgent.match(/Intel Mac/i)) {
        if (debugMode === true) {
            alert('Device is a desktop or laptop- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'desktop_or_laptop';
    } else if (window.navigator.userAgent.match(/Nexus 7/i)
        || window.navigator.userAgent.match(/Nexus 10/i)
        || window.navigator.userAgent.match(/KFAPWI/i)) {
        window.deviceTypeVar = 'tablet';
        if (debugMode === true) {
            alert('Device is a tablet - ' + navigator.userAgent);
        }
    } else {
        if (debugMode === true) {
            alert('Device is unknown- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'Unknown';
    }
}
jlmurph
sumber
1

Ini hanyalah port es6 dari jawaban yang diterima yang saya gunakan dalam proyek saya. Perhatikan bahwa ini juga termasuk tablet.

export const isMobile = () => {
  const vendor = 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|xda|xiino|android|ipad|playbook|silk/i.test(
      vendor
    ) ||
    /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(
      vendor.substr(0, 4)
    )
  );
};
Dan saya
sumber
1

return 'ontouchstart' in window && window.screen.availWidth < 768

Bagaimana dengan ini, ia memperluas jawaban di atas tetapi juga memeriksa ukuran layar

Dave Keane
sumber
1

Menggunakan Regex (dari detectmobilebrowsers.com ):

/* eslint-disable */
export const IS_MOBILE = (function (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)
      )
  )
  // @ts-ignore
})(navigator.userAgent || navigator.vendor || window.opera)
/* eslint-enable */
Илья Зеленько
sumber
0

Ini juga bisa menjadi solusi.

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;

  console.log('Mobile device:'+isMobile);

  var doc_h = $(document).height(); // returns height of HTML document
  var doc_w = $(document).width(); // returns width of HTML document
  console.log('Height: '+doc_h);
  console.log('width: '+doc_w);

  var iPadVertical = window.matchMedia("(width: 768px) and (height: 1024px) and (orientation: portrait)");
  var iPadHoricontal = window.matchMedia("(width: 1024px) and (height: 767px) and (orientation: landscape)");

  console.log('Height: '+doc_h);
  console.log('width: '+doc_w);

  if (iPadVertical.matches) {
      console.log('Ipad vertical detected');
  }else if (iPadHoricontal.matches){
      console.log('Ipad horicontal detected');
  }else {
      console.log('No Ipad');
  }

Jika Anda menggunakan kedua metode ini, Anda akan mendapatkan cara sempurna untuk mendeteksi perangkat yang berbeda.

Friis1978
sumber