Мені цікаво, чи можна виявити, чи працює браузер на iOS, подібно до того, як ви можете виявити функцію виявлення за допомогою Modernizr (хоча це, очевидно, виявлення пристрою, а не виявлення функцій).

Зазвичай я віддаю перевагу виявленню функцій, але мені потрібно з’ясувати, чи пристрій є iOS через те, як вони обробляють відео відповідно до цього питання API YouTube не працює з пристроєм iPad / iPhone / не-Flash

Виявлення iOS

Я не прихильник нюхання агента User Agent, але ось як би ви це зробили:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

Ще один спосіб покладається на navigator.platform:

var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

iOSбуде trueабоfalse

Чому б не MSStream

Microsoft ввів слово iPhone в IE11, userAgentщоб якось спробувати обдурити Gmail. Тому нам потрібно виключити це. Більше інформації про це тут і тут .

Нижче оновлено IE11 (оновлення userAgentInternet Explorer для Windows Phone 8.1):

Mozilla / 5.0 (мобільний; Windows Phone 8.1; Android 4.0; ARM; Trident / 7.0; Touch; rv: 11.0; IEMobile / 11.0; NOKIA; Lumia 930), як iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, як Gecko) Мобільний сафарі / 537

Легко додайте більше пристроїв, не використовуючи регулярні вирази:

function iOS() {

  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  if (navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return true; }
    }
  }

  return false;
}

iOS()буде trueабоfalse

Примітка. І те, navigator.userAgentі navigator.platformінше, і може бути підробленим користувачем або розширенням браузера.

Виявлення версії iOS

Найпоширеніший спосіб виявлення версії iOS - це аналіз її з рядка User Agent . Але є також умовивід виявлення функцій * ;

Ми знаємо факт, який history APIбув представлений в iOS4 - matchMedia APIв iOS5 - webAudio APIв iOS6 - WebSpeech APIв iOS7 і т. Д.

Примітка . Наступний код не є надійним і порушиться, якщо будь-яка з цих функцій HTML5 застаріла в новій версії iOS. Вас попередили!

function iOSversion() {

  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    if (window.indexedDB) { return 'iOS 8 and up'; }
    if (window.SpeechSynthesisUtterance) { return 'iOS 7'; }
    if (window.webkitAudioContext) { return 'iOS 6'; }
    if (window.matchMedia) { return 'iOS 5'; }
    if (window.history && 'pushState' in window.history) { return 'iOS 4'; }
    return 'iOS 3 or earlier';
  }

  return 'Not an iOS device';
}

Після iOS 13 слід виявити подібні пристрої iOS, оскільки iPad не буде розпізнаний як пристрої iOS старими способами (завдяки новим параметрам "настільних ПК", увімкнутим за замовчуванням):

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

Перша умова для iOS <13 або iPhone або iPad з відключеним режимом робочого столу, друга умова для iPadOS 13 у конфігурації за замовчуванням, оскільки він позиціонує себе як Macintosh Intel, але насправді є єдиним Macintosh з мультитач.

Швидше хак, ніж справжнє рішення, але надійно працюйте для мене

PS Як було сказано раніше, вам, ймовірно, слід додати перевірку IE

let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream

Це встановлює змінну _iOSDeviceна true або false

_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);

Якщо ви використовуєте Modernizr , ви можете додати спеціальний тест для нього.

Не має значення, який режим виявлення ви вирішили використовувати (userAgent, navigator.vendor або navigator.platform), ви завжди можете його згортати для легшого використання пізніше.

//Add Modernizr test
Modernizr.addTest('isios', function() {
    return navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
});

//usage
if (Modernizr.isios) {
    //this adds ios class to body
    Modernizr.prefixed('ios');
} else {
    //this adds notios class to body
    Modernizr.prefixed('notios');
}

Існують спеціальні тести Modernizr: https://gist.github.com/855078

Спрощена, проста в розширенні версія.

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;

Напевно, варто відповісти, що iPad під керуванням iOS 13 буде navigator.platformвстановлений MacIntel, тобто знадобиться знайти інший спосіб виявлення пристроїв iPadOS.

Я написав це пару років тому, але я вважаю, що це все ще працює:

if(navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPhone/i) || (navigator.userAgent.match(/iPod/i))) 

    {

        alert("Ipod or Iphone");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.match(/iPad/i))  

    {

        alert("Ipad");

    }

else if (navigator.vendor != null && navigator.vendor.match(/Apple Computer, Inc./) && navigator.userAgent.indexOf('Safari') != -1)

    {

        alert("Safari");

    }

else if (navigator.vendor == null || navigator.vendor != null)

    {

        alert("Not Apple Based Browser");

    }

Користувачі-користувачі на пристроях iOS кажуть, що в них iPhone або iPad. Я просто фільтрую на основі цих ключових слів.

По можливості, додаючи тести Modernizr, слід додати тест для функції, а не пристрою чи операційної системи. Немає нічого поганого в тому, щоб додати десять тестів на все тестування для iPhone, якщо для цього потрібно. Деякі речі просто неможливо виявити.

    Modernizr.addTest('inpagevideo', function ()
    {
        return navigator.userAgent.match(/(iPhone|iPod)/g) ? false : true;
    });

Наприклад, на iPhone (а не на iPad) відео не можна відтворювати вбудованому на веб-сторінці, воно відкривається на весь екран. Тому я створив тестове "відео без реклами"

Потім ви можете використовувати це в css (Modernizr додає клас .no-inpagevideoдо <html>тегу, якщо тест не вдається)

.no-inpagevideo video.product-video 
{
     display: none;
}

Це приховає відео на iPhone (те, що я насправді роблю в цьому випадку, показує альтернативне зображення з натисканням клавіші onklick для відтворення відео - я просто не хочу показувати відеоплеєр за замовчуванням та кнопку відтворення).

Ого, тут багато тривалого хитрого коду. Будь ласка, будь ласка!

Цей IMHO швидкий, економій та працює добре:

 iOS = /^iP/.test(navigator.platform);

 // or, more future-proof (in theory, probably not in practice):

 iOS = /^iP(hone|[ao]d)/.test(navigator.platform);

 // or, if you prefer readability:

 iOS = /^(iPhone|iPad|iPod)/.test(navigator.platform);

• Це швидко, тому що регулярне вивільнення перевіряє ^ -те позицію затримки ^ рядка платформи і зупиняється, якщо немає «iP» (швидше, ніж пошук довгої рядки UA до кінця)
• Це безпечніше, ніж перевірка UA (якщо припустити, що навігатор.платформа менше підроблена)
• Виявляє iPhone / iPad Simulator

Трохи оновіть першу відповідь, використовуючи більш функціональний підхід.

    const isIOS = [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ].indexOf(navigator.platform) !== -1;

Жоден з попередніх відповідей тут не працює для всіх основних браузерів для всіх версій iOS, включаючи iOS 13. Ось рішення, яке працює для Safari, Chrome і Firefox для всіх версій iOS:

var isIOS = (function () {
    var iosQuirkPresent = function () {
        var audio = new Audio();

        audio.volume = 0.5;
        return audio.volume === 1;   // volume cannot be changed from "1" on iOS 12 and below
    };

    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var isAppleDevice = navigator.userAgent.includes('Macintosh');
    var isTouchScreen = navigator.maxTouchPoints >= 1;   // true for iOS 13 (and hopefully beyond)

    return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));
})();

Зауважте, що цей фрагмент коду був написаний з пріоритетом щодо читабельності, а не стислість чи ефективність.

Пояснення:

• Якщо користувальницький агент містить будь-яку з "iPod | iPhone | iPad", то явно пристрій є iOS. В іншому випадку продовжуйте ...

• Будь-який інший користувальницький агент, який не містить "Macintosh", не є пристроєм Apple і тому не може бути iOS. Інакше це пристрій Apple, тож продовжуйте ...

• Якщо він maxTouchPointsмає значення 1або більше, то пристрій Apple має сенсорний екран, і тому він повинен бути iOS, оскільки немає Macs з сенсорними екранами (kudos to kikiwora для згадки maxTouchPoints). Зауважте, що maxTouchPointsце undefinedдля iOS 12 і нижче, тому нам потрібне інше рішення для цього сценарію ...

• iOS 12 і нижче має вигадку, яка не існує в Mac OS. Придумка полягає в тому, що volumeвластивість Audioелемента не може бути успішно встановлена ​​на будь-яке значення, крім 1. Це відбувається тому, що Apple не дозволяє змінювати гучність Audioелемента для пристроїв iOS, але робить це для Mac OS. Ця химерність може бути використана як остаточний метод резервного відрізнення пристрою iOS від пристрою Mac OS.

Ви також можете використовувати includes

  const isApple = ['iPhone', 'iPad', 'iPod'].includes(navigator.platform)

У моєму випадку користувальницький агент не надто добре оцінювався, оскільки в Ipad користувальницький агент був таким самим, як у Mac OS, тому мені довелося робити неприємну хитрість:

var mql = window.matchMedia("(orientation: landscape)");

/**
 * If we are in landscape but the height is bigger than width
 */
if(mql.matches && window.screen.height > window.screen.width) {
    // IOS
} else {
    // Mac OS
}

Щоб виявити версію iOS, потрібно знищити користувальницький агент за допомогою коду Javascript:

 var res = navigator.userAgent.match(/; CPU.*OS (\d_\d)/);
    if(res) {
        var strVer = res[res.length-1];
        strVer = strVer.replace("_", ".");
        version = strVer * 1;
    }

var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;