Mendeteksi ponsel Android melalui Javascript / jQuery

122

Bagaimana cara saya mendeteksi bahwa perangkat yang digunakan adalah Android untuk situs web seluler?

Saya perlu menerapkan atribut css tertentu ke platform Android.

Terima kasih

javascript jquery android Xavier
sumber

Jawaban:

223

Lihatlah itu: http://davidwalsh.name/detect-android

JavaScript:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
  window.location = 'http://android.davidwalsh.name';
}

PHP:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
  header('Location: http://android.davidwalsh.name');
  exit();
}

Sunting : Seperti yang ditunjukkan di beberapa komentar, ini akan bekerja di 99% kasus, tetapi beberapa kasus tepi tidak tercakup. Jika Anda membutuhkan solusi yang jauh lebih canggih dan antipeluru di JS, Anda harus menggunakan platform.js: https://github.com/bestiejs/platform.js

Michael Lumbroso
sumber
5
jangan lupa juga untuk mengecek tablet android: googlewebmastercentral.blogspot.com/2011/03/…
2
Perlu dicatat bahwa ini tidak selalu berfungsi untuk perangkat android karena, misalnya, agen pengguna yang dilaporkan oleh perangkat Kindle Fire HD tidak mengandung kata 'android' sama sekali.
djbp
3
Pendekatan navigator.userAgent tidak berfungsi pada perangkat samsung galaxy. Tidak ada 'Android' di spesifikasi browser.
AsafK
2
Dua baris pertama solusi JS dapat disederhanakan menjadi:var isAndroid = /Android/i.test(navigator.userAgent)
Dave Koo
4
Solusi Anda tidak berhasil. Berikut adalah agen pengguna Nokia Lumia. Dan coba tebak? itu cocok sebagai android:Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 625; Orange) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
Sam Jason Braddock
2

Saya pikir jawaban Michal adalah yang terbaik, tetapi kita dapat mengambil langkah lebih jauh dan secara dinamis memuat CSS Android sesuai pertanyaan asli:

var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", "/css/android.css");
    document.body.appendChild(css);
}
drlarsen
sumber
1
Mengapa Anda ingin melakukan itu, sementara Anda dapat menggunakan kueri media? Deteksi perangkat JS seharusnya hanya untuk penyempurnaan, seperti menambahkan undangan untuk menginstal aplikasi Anda. Perenderan halaman tidak boleh mengandalkannya karena Anda akan mengalami masalah kinerja dan pengalaman kegunaan yang mengerikan.
camilokawerin
1
@camilokawerin Tanggapan Anda harus ditujukan kepada penulis. Saya hanya memberikan jawaban atas pertanyaannya. Ada beberapa kasus di mana Anda menginginkan CSS khusus platform. Misalnya, jika Anda ingin gaya visual antarmuka cocok dengan perangkat.
drlarsen
2 
;(function() {
    var redirect = false
    if (navigator.userAgent.match(/iPhone/i)) {
        redirect = true
    }
    if (navigator.userAgent.match(/iPod/i)) {
        redirect = true
    }
    var isAndroid = /(android)/i.test(navigator.userAgent)
    var isMobile = /(mobile)/i.test(navigator.userAgent)
    if (isAndroid && isMobile) {
        redirect = true
    }
    if (redirect) {
        window.location.replace('jQueryMobileSite')
    }
})()
Phillip Senn
sumber
-3

versi js, menangkap iPad juga:

var is_mobile = /mobile|android/i.test (navigator.userAgent);
jonny
sumber
3
Tidak berfungsi karena menangkap banyak perangkat, bukan hanya Android seperti yang diminta.
NickG
1
Gunakan setidaknya sesuatu seperti ini: /android.*(?=mobile)/i.test(navigator.userAgent); untuk mendeteksi ponsel Android. Tapi ekspresi reguler ini mengandung bilangan "mahal", jadi jawaban Philip dengan 2 tes terpisah mungkin lebih tepat.
Vadim P.