Apa cara terbaik untuk mendeteksi perangkat seluler?

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.

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;
}

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.

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!
}

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; }
}

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.

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

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/

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

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.

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

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");
}

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

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.

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.

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

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;
}

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

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.

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();
}

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;
}

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?

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
}

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
}

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";
}

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!');
}

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));
}

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

Saya menggunakan ini

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

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.

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)