Mendeteksi sistem operasi iOS / Android

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

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

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.

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

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.

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

}

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

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.

Untuk ini dan jenis lain dari deteksi klien saya sarankan perpustakaan js ini: http://hictech.github.io/navJs/tester/index.html

Untuk jawaban spesifik Anda, gunakan:

navJS.isIOS() || navJS.isAndroid()

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