Pertanyaan Apa cara terbaik untuk mendeteksi perangkat seluler di jQuery?


Apakah ada cara yang kuat untuk mendeteksi apakah pengguna menggunakan perangkat seluler di jQuery? Sesuatu yang mirip dengan atribut CSS @media? Saya ingin menjalankan skrip yang berbeda jika browser ada di perangkat genggam.

JQuery $.browser fungsi bukan apa yang saya cari.


1362


asal


Jawaban:


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 $.browser akan kembali "device" untuk semua perangkat di atas

catatan: $.browser dihapus jQuery v1.9.1. Tetapi Anda dapat menggunakan ini dengan menggunakan plugin migrasi jQuery Kode


Versi yang lebih lengkap:

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

1732



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 memiliki situs saya "ramah seluler". Jadi saya menggunakan CSS Media Queries untuk menampilkan / menyembunyikan elemen tergantung pada ukuran layar.

Misalnya, dalam versi seluler saya, saya tidak ingin mengaktifkan Kotak Suka Facebook, karena memuat semua gambar profil dan hal-hal tersebut. 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 bisa melihatnya beraksi di http://lisboaautentica.com

Saya masih mengerjakan versi seluler, jadi masih belum kelihatan sebagaimana seharusnya, seperti yang tertulis.

Perbarui oleh dekin88

Ada JavaScript API yang dibangun untuk mendeteksi media. Daripada menggunakan solusi di atas, cukup gunakan yang berikut:

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

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

Dukungan Browser:  http://caniuse.com/#feat=matchmedia

Keuntungan metode ini adalah tidak hanya lebih sederhana dan lebih pendek, tetapi Anda dapat secara kondisional menargetkan perangkat yang berbeda seperti ponsel cerdas dan tablet secara terpisah jika perlu tanpa harus menambahkan elemen tiruan ke DOM.


411



Menurut Mozilla - Deteksi peramban menggunakan agen pengguna:

Singkatnya, kami menyarankan 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 umum, termasuk mobile Mozilla, Safari, IE, Opera, Chrome, dll.

Pembaruan untuk Android

EricL merekomendasikan pengujian untuk Android sebagai agen pengguna juga, seperti String agen pengguna Chrome untuk tablet tidak termasuk "Mobi" (versi telepon memang):

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

176



Apa yang Anda lakukan dengan ingin mendeteksi perangkat seluler semakin dekat dengan konsep IMO "peramban mengendus". Ini mungkin akan jauh lebih baik untuk melakukan deteksi fitur. Perpustakaan suka http://www.modernizr.com/ dapat membantu dengan itu.

Misalnya, di mana garis antara seluler dan non-seluler? Semakin hari semakin buram setiap hari.


74



Satu kalimat sederhana dan efektif:

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

Namun kode di atas tidak memperhitungkan kasus 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; }
}

72



Ini bukan jQuery, tetapi saya menemukan ini: http://detectmobilebrowser.com/

Ini menyediakan skrip untuk mendeteksi peramban 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 menyadari koleksi jQuery.support. Ini adalah kumpulan properti untuk mendeteksi kemampuan peramban saat ini. Dokumentasi ada di sini: http://api.jquery.com/jQuery.support/

Karena saya tidak tahu persis apa yang ingin Anda capai, saya tidak tahu ini akan menjadi yang paling berguna.

Semua yang dikatakan, saya pikir taruhan terbaik Anda adalah untuk mengarahkan atau menulis skrip yang berbeda ke output menggunakan bahasa sisi server (jika itu adalah opsi). Karena Anda tidak benar-benar mengetahui kemampuan x browser seluler, melakukan deteksi, dan logika pengubahan di sisi server akan menjadi metode yang paling andal. Tentu saja, semua itu adalah titik diperdebatkan jika Anda tidak dapat menggunakan bahasa sisi server :)


59



Kadang-kadang diinginkan untuk mengetahui perangkat merek mana yang digunakan klien untuk menampilkan konten khusus untuk perangkat itu, seperti tautan ke toko iPhone atau pasar Android. Modernizer hebat, tetapi hanya menunjukkan kemampuan browser Anda, seperti HTML5, atau Flash.

Berikut 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/


45



Temukan solusi dalam: 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 ini Ponsel, Anda dapat menguji menggunakan:

if(isMobile.any()) {
   //some code...
}

39



Jika dengan "ponsel" yang Anda maksud "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 sebesar 320. Pada Android Anda akan berakhir dengan sebuah window.outerWidth 480 (meskipun itu dapat bergantung pada Android). iPad dan tablet Android akan mengembalikan angka seperti 768 sehingga mereka akan mendapatkan tampilan penuh seperti yang Anda inginkan.


18



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

Namun, saya lebih suka menggunakan kombinasi Modernizr.touch dan pengujian agen pengguna, 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.touch berfungsi di atas dengan ('ontouchstart' in document.documentElement)

Juga perhatikan bahwa menguji agen pengguna iemobile akan memberi Anda jangkauan yang lebih luas dari perangkat mobile Microsoft yang terdeteksi Windows Phone.

Juga lihat pertanyaan SO ini


14