Мне интересно, можно ли определить, работает ли браузер на iOS, аналогично тому, как вы можете обнаруживать с помощью Modernizr (хотя это, очевидно, обнаружение устройства, а не обнаружение функции).
Обычно я предпочитаю обнаружение функции, но мне нужно выяснить, является ли устройство iOS из-за того, как они обрабатывают видео по этому вопросу. API YouTube не работает с iPad/Устройство iPhone/не-Flash
Я не фанат фальсификации 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
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; 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 - это анализ ее по строке User Agent. Но есть также вывод обнаружения функции *;
Мы точно знаем, что history API был представлен в iOS4 - matchMedia API в iOS5 - webAudio API webAudio в iOS6 - WebSpeech API WebSpeech в 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';
}
Это устанавливает переменную _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;
Вау, много длинного хитрого кода здесь. Будьте проще, пожалуйста!
ИМХО это быстро, сохранить и работать хорошо:
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);
После iOS 13 вы должны обнаруживать устройства iOS, подобные этому, поскольку iPad не будет определяться как устройства iOS старыми способами (из-за новых опций "рабочего стола", включенных по умолчанию):
let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
Первое условие для iOS & lt; 13 или iPhone или iPad с отключенным режимом рабочего стола, второе условие для iPadOS 13 в конфигурации по умолчанию, поскольку он позиционирует себя как Macintosh Intel, но на самом деле является единственным Macintosh с мультитач.
Скорее взломать, тогда реальное решение, но работать надежно для меня
Пользовательские агенты на устройствах iOS говорят в них iPhone или iPad. Я просто фильтрую на основе этих ключевых слов.
Я написал это пару лет назад, но я считаю, что он все еще работает:
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");
}
По возможности при добавлении тестов 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 (то, что я на самом деле делаю в этом случае, показывает альтернативное изображение с onclick, чтобы воспроизвести видео - я просто не хочу, чтобы проигрыватель по умолчанию и кнопка воспроизведения отображались).
Вероятно, стоит ответить, что iPad, работающий на iOS 13, будет иметь платформу navigator.platform установленную на MacIntel, что означает, что вам нужно будет найти другой способ обнаружения устройств iPadOS.
Как упоминалось выше, вы можете использовать пользовательский агент для определения того, работаете ли вы в iOS. Что касается различных краевых случаев - он уже позаботился:) Я написал этот is-mobile component, который может определить, работает ли вы на устройстве iOS и других платформах, и учитывает различные краевые случаи.
Не стесняйтесь импортировать его и использовать, как показано в следующих примерах:
isMobile.iOS() => true/false
isMobile.iPhone() => true/false
isMobile.iPad() => true/false
isMobile.Android() => true/false
isMobile.Windows() => true/false
isMobile.any() => true/false
Немного обновите первый ответ, используя более функциональный подход.
const isIOS = [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod',
]
.map(device => navigator.platform === device)
.filter(device => device)
.reduce(() => true, false);
Чтобы обнаружить версию 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;