Определить, является ли устройство iOS - PullRequest
Новая
       72

Определить, является ли устройство iOS

351 голосов
/ 27 января 2012

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

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

Ответы [ 12 ]

727 голосов
/ 28 января 2012

Обнаружение 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 userAgent (Internet Explorer для Windows Phone 8.1 Update):

Mozilla / 5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident / 7.0); Сенсорный; rv: 11,0; IEMobile / 11,0; NOKIA; Lumia 930), как iPhone OS 7_0_3 Mac OS X AppleWebKit / 537 (KHTML, как Gecko) Mobile Safari / 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 - анализ ее у пользователяСтрока агента .Но есть также функция обнаружение логический вывод *;

Мы знаем, что 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';
}
13 голосов
/ 08 августа 2013

Устанавливает переменную _iOSDevice в true или false 

_iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);
10 голосов
/ 27 мая 2013

Если вы используете 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');
}
8 голосов
/ 18 октября 2012

Есть это пользовательские тесты Модернизра: https://gist.github.com/855078

4 голосов
/ 18 марта 2014

Упрощенная, легко расширяемая версия. 

var iOS = ['iPad', 'iPhone', 'iPod'].indexOf(navigator.platform) >= 0;
3 голосов
/ 27 января 2012

Пользовательские агенты на устройствах iOS говорят iPhone или iPad в них. Я просто фильтрую по этим ключевым словам.

2 голосов
/ 21 сентября 2018

Ух, тут много длинного хитрого кода.Будьте проще, пожалуйста!

Это ИМХО быстро, сохранить и работать хорошо: 

 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);
  • Это быстро, потому что регулярное выражение проверяет ^ s Тартовая позиция строки платформы сначала и останавливается, если нет "iP" (быстрее, чем поиск длинной строки UA до конца в любом случае))
  • Обнаруживает iPhone / iPad Simulator
2 голосов
/ 10 мая 2014

По возможности при добавлении тестов Modernizr вы должны добавлять тест для функции, а не устройства или операционной системы. Нет ничего плохого в том, чтобы добавить десять тестов для iPhone, если это то, что нужно. Некоторые вещи просто не могут быть обнаружены. 

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

Например, на iPhone (а не на iPad) видео нельзя воспроизводить на веб-странице, оно открывается на весь экран. Поэтому я создал тест «no-inpage-video»

Затем вы можете использовать это в css (Modernizr добавляет класс .no-inpagevideo к тегу <html>, если тест не пройден) 

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

Это будет скрывать видео на iPhone (в данном случае я на самом деле показываю альтернативное изображение с кликом для воспроизведения видео - я просто не хочу показывать видеоплеер и кнопку воспроизведения по умолчанию).

2 голосов
/ 05 декабря 2012

Я написал это пару лет назад, но я верю, что это все еще работает: 

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

    }
0 голосов
/ 06 июня 2019

Немного обновите первый ответ, используя более функциональный подход. 

    const isIOS = [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ]
      .map(device => navigator.platform === device)
      .filter(device => device)
      .reduce(() => true, false);
Страница:
...