Определение операционной системы iOS / Android

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

Я посмотрел на скрипт «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 Phone, вы можете использовать эту полную версию:

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.. } , вернет true только для пользовательских агентов 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-plugin, вы можете обнаружить

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