Mendeteksi sistem operasi iOS / Android


186

Saya telah melakukan riset, dan pertanyaan ini telah muncul, tetapi tidak dengan cara yang saya inginkan. Saya sedang membangun halaman untuk klien yang merupakan pendaratan kode QR, yang merupakan tempat untuk mengunduh aplikasi. Jadi dia tidak perlu mencetak 2 kode QR pada halaman, saya ingin mendeteksi sistem operasi saat ini (Apple / Android / Lainnya [tidak didukung]) dan memodifikasi elemen saya berdasarkan nilai itu.

Saya telah melihat script "detectmobilebrowsers" dan itu hanya bertujuan untuk mengetahui apakah pengguna mobile atau tidak, sedangkan saya ingin mencari tahu sistem operasi apa yang dijalankan pengguna dan menyarankan versi aplikasi terbaik.

Jawaban lain yang saya temukan mirip dengan pertanyaan ini sepertinya sudah ketinggalan zaman atau tidak dapat diandalkan (tidak memiliki deteksi untuk browser tablet Android), jadi saya mencari sesuatu yang baru. Bagaimana saya bisa mencapai ini? (Lebih disukai menggunakan jQuery - Javascript - PHP dalam urutan itu).


2
Agen pengguna tidak memberi tahu Anda apa yang perlu Anda ketahui?
Babak Naffas

2
Masalah ini telah diselesaikan di sini: stackoverflow.com/questions/3514784/…
gretro

1
@ gretro, yang menjelaskan jika pengguna bergerak, bukan sistem operasi yang mereka jalankan. Babak, akankah sesuatu seperti navigator.platform menjadi solusinya? Saya tidak terbiasa dengan agen pengguna. Bagaimana saya bisa memastikan bahwa itu akan bekerja untuk SEMUA perangkat android terlepas dari versi?
Alexander Lozada

Tidak ada cara yang pasti untuk mendeteksinya, karena agen pengguna adalah satu-satunya hal yang dapat Anda lakukan. Periksa di sini untuk info lebih lanjut ... whatsmyos.com
kembali Monica Cellio

2
@Alexander Lozada: Pada jawaban yang diterima, mereka pada dasarnya menguji apakah itu iPhone, iPod, perangkat Android atau apa pun untuk mengembalikan true. Simpan saja yang Anda inginkan misalnya if( /Android/i.test(navigator.userAgent) ) { // some code.. }akan mengembalikan true hanya untuk agen pengguna Android.
gretro

Jawaban:


389

Anda dapat menguji string agen pengguna:

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

Dan OP dapat melihat daftar ini jika tes Anda perlu diubah
Juan Mendes

3
Luar biasa. Menggunakan mode seluler Chrome Anda dapat mengujinya di browser desktop.
DaFunkyAlex

4
@feeela kadang-kadang fitur ini seperti bisa menginstal apks, yang tidak mungkin terdeteksi.
Daniel Lubarov

2
Saya sudah menambahkan else if (userAgent.match(/Windows Phone/i)) { return 'WindowsPhone'; } sebelum Android yang lain jika mendeteksi Windows Phone. Sejauh ini tampaknya berfungsi dengan baik.
Arthur

4
Dari stackoverflow.com/a/9039885/177710 : dalam cek untuk itu iOSkita juga perlu memverifikasi !window.MSStreamuntuk menghindari IE11 yang dihitung sebagai iOS;-)
Oliver

12

Solusi 1: Agen Pengguna Mengendus

Untuk Android dan iPhone:

if( /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) ) {
 // run your code here
}

Jika Anda ingin mendeteksi semua perangkat seluler termasuk blackberry dan Windows phone maka Anda dapat menggunakan versi komprehensif ini:

var deviceIsMobile = false; //At the beginning we set this flag as false. If we can detect the device is a mobile device in the next line, then we set it as true.


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))) {
   deviceIsMobile = true;
}

if(deviceIsMobile){
    // run your code here
}

Cons : String agen pengguna berubah dan semakin diperbarui karena ponsel dan merek baru akan hadir hari demi hari. Jadi, Anda harus terus memperbarui daftar ini jika Anda ingin mendukung semua perangkat seluler.

Solusi 2: deteksi seluler perpustakaan JS

Anda dapat menggunakan ponsel mendeteksi pustaka JS untuk melakukan ini.

Cons : Fitur deteksi perangkat berbasis JavaScript ini HANYA dapat berfungsi untuk smartphone generasi terbaru, seperti iPhone, Android, dan perangkat Palm WebOS. Fitur pendeteksian perangkat ini TIDAK mungkin berfungsi untuk ponsel cerdas yang lebih tua yang memiliki dukungan JavaScript yang buruk, termasuk perangkat BlackBerry, PalmOS, dan Windows Mobile yang lebih tua.


4

Satu dapat menggunakan navigator.platform untuk mendapatkan sistem operasi di mana browser diinstal.

function getPlatform() {
   var platform = ["Win32", "Android", "iOS"];

   for (var i = 0; i < platform.length; i++) {

       if (navigator.platform.indexOf(platform[i]) >- 1) {

           return platform[i];
       }
   }
}

getPlatform();

13
Pada Samsung Galaxy Grand Prime yang saya uji sekarang, navigator.platform mengembalikan '' Linux armv7l ''
mico

3

Masalah ini telah diselesaikan di sini: Apa cara terbaik untuk mendeteksi perangkat seluler di jQuery? .

Pada jawaban yang diterima, mereka pada dasarnya menguji apakah itu iPhone, iPod, perangkat Android atau apa pun untuk mengembalikan true. Simpan saja yang Anda inginkan misalnya if( /Android/i.test(navigator.userAgent) ) { // some code.. }akan mengembalikan true hanya untuk agen pengguna Android.

Namun, agen pengguna tidak benar-benar dapat diandalkan karena mereka dapat diubah. Yang terbaik adalah mengembangkan sesuatu yang universal untuk semua platform seluler.


Jika di jQuery berbeda dari vanilla JS. Mungkin juga di C.
Alex Jone

2

Anda juga dapat Mencapai ini dengan agen pengguna di php:

$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);

if(stripos($userAgent,'android') !== false) { // && stripos($userAgent,'mobile') !== false) {
  header('Location: http://oursite.com/download/yourApp.apk');

exit();

}


2

Jika Anda menggunakan React Js untuk situs web Anda, gunakan https://www.npmjs.com/package/react-device-detect


4
Perhatikan bahwa ini sedikit impor yang berat (~ 23kb) hanya untuk memeriksa iOS vs Android.
jessepinho

@ jessepinho: benar. Kalau dipikir-pikir, saya tidak akan melakukannya untuk menjaga tubuh saya tetap ringan. Tapi itu memang membantu membuat semuanya bekerja.
Kira

1

Anda juga dapat membuat tautan Firbase Dynamic yang akan berfungsi sesuai kebutuhan Anda. Ini mendukung banyak platform. Tautan ini dapat dibuat, secara manual maupun melalui pemrograman. Anda kemudian dapat menyematkan tautan ini dalam kode QR.

Jika aplikasi target diinstal, tautan akan mengarahkan pengguna ke aplikasi. Jika tidak diinstal, maka akan diarahkan ke Play Store / App store / Situs web lain yang dikonfigurasi.



0

Dengan menggunakan cordova-device-plugin, Anda dapat mendeteksi

device.platform

akan menjadi "Android" untuk android, dan "windows" untuk windows. Bekerja pada perangkat, dan saat mensimulasikan pada browser. Ini adalah roti panggang yang akan menampilkan nilai perangkat:

    window.plugins.toast.showLongTop(
    'Cordova:     ' + device.cordova + '\n' +
    'Model:       ' + device.model + '\n' +
    'Platform:    ' + device.platform + '\n' +
    'UUID:        ' + '\n' +
                      device.uuid + '\n' +
    'Version:     ' + device.version + '\n' +
    'Manufacturer ' + device.manufacturer + '\n' +
    'isVirtual    ' + device.isVirtual + '\n' +
    'Serial       ' + device.serial);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.