Виявлення операційної системи iOS / Android

Я провів деякі дослідження, і це питання постало, але не так, як я маю намір. Я будую сторінку для клієнта, на якій розміщено QR-код, на якому можна завантажити додаток. Тож йому не потрібно роздруковувати 2 QR-коди на сторінці, я хотів би виявити поточну операційну систему (Apple / Android / Інше [не підтримується]) та змінити мої елементи на основі цього значення.

Я переглянув сценарій "detectmobilebrowsers", і він просто спрямований на те, щоб зрозуміти, чи є користувач мобільним взагалі, хоча я хотів би розібратися, в якій операційній системі працює користувач, і запропонувати найкращу версію програми.

Інші відповіді, які я знайшов схожими на це питання, видалися застарілими або ненадійними (не має виявлення для браузерів планшетів Android), тому я шукаю щось нове. Як я можу цього досягти? (Переважно, використовуючи jQuery - Javascript - PHP у тому порядку).

Ви можете протестувати рядок агента користувача:

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

Рішення 1: Сніфінг агента користувача

Для Android та iPhone:

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

Якщо ви хочете виявити всі мобільні пристрої, включаючи blackberry та телефон Windows, то ви можете використовувати цю вичерпну версію:

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
}

Мінуси : рядки користувацьких агентів змінюються та оновлюються, оскільки нові телефони та бренди надходять з кожним днем. Тому вам потрібно постійно оновлювати цей список, якщо ви хочете підтримувати всі мобільні пристрої.

Рішення 2: бібліотека JS для мобільного детектування

Для цього можна використовувати бібліотеку мобільних детекторів JS .

Мінуси : Ці функції виявлення пристроїв на основі JavaScript можуть ТІЛЬКИ працювати для смартфонів нового покоління, таких як пристрої iPhone, Android та Palm WebOS. Ці функції виявлення пристроїв НЕ можуть працювати для старих смартфонів, у яких погана підтримка JavaScript, включаючи старі пристрої BlackBerry, PalmOS та Windows Mobile.

Можна використовувати navigator.platform, щоб отримати операційну систему, на якій встановлений браузер.

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

Це питання вже вирішено тут: Який найкращий спосіб виявити мобільний пристрій у jQuery? .

Відповідно до прийнятої відповіді, вони в основному перевіряють, чи це iPhone, iPod, Android-пристрій чи що завгодно, щоб повернути правду. Залишайте, наприклад, ті, які ви хочете, наприклад if( /Android/i.test(navigator.userAgent) ) { // some code.. }, повертатимуться правдою лише для користувачів-користувачів Android.

Однак користувальницькі агенти насправді не є надійними, оскільки їх можна змінити. Найкраще все-таки розробити щось універсальне для всіх мобільних платформ.

Ви також можете досягти цього за допомогою агента користувача на 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();

}

Якщо ви використовуєте React Js для свого веб-сайту, використовуйте https://www.npmjs.com/package/react-device-detect

Ви також можете створити динамічні посилання Firbase які працюватимуть відповідно до вашої потреби. Він підтримує кілька платформ. Це посилання можна створити як вручну, так і за допомогою програмування. Потім ви можете вбудувати це посилання у QR-код.

Якщо встановлено цільовий додаток, посилання переспрямує користувача на додаток. Якщо його не встановлено, він буде перенаправлений на Play Store / App Store / Будь-який інший налаштований веб-сайт.

Для цього та інших видів виявлення клієнтів я пропоную цю бібліотеку js: http://hictech.github.io/navJs/tester/index.html

Для конкретної відповіді використовуйте:

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

Використовуючи додаток cordova-device, ви можете виявити

device.platform

буде "Android" для Android та "windows" для Windows. Працює на пристрої та при моделюванні в браузері. Ось тост, який відображатиме значення пристрою:

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