Определение устройства iOS на JavaScript: решение для видео
Быстрый ответ
Определить устройства iOS можно при помощи свойств navigator. Ниже приведен короткий отрывок кода на JavaScript, который это демонстрирует:
const isIOS = /(iPad|iPhone|iPod|MacIntel)/.test(navigator.userAgent) && !window.MSStream;
Этот код проверяет userAgent на предмет упоминаний об устройствах iOS и исключает ошибочное определение устройств Windows как устройств iOS путём проверки window.MSStream
.
Подробнее об определении iOS
Быстрый ответ эффективен в базовых сценариях, но он не всегда точен из-за изменений в userAgent, внесённых некоторыми устройствами iOS.
Учёт изменений начиная с iPadOS 13
С появлением iPadOS 13, iPad начали определяться как стационарные устройства. В этой связи рекомендуется использовать navigator.platform
и navigator.maxTouchPoints
для уточнения типа устройства, базируясь на характерных для iOS сенсорных возможностях.
// Итак, ты обозначаешься как Mac? Хорошо, проверим, есть ли у тебя мультитач?
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
Особенности сенсорных экранов iOS
Наличие поддержки сенсорного управления помогает разделять устройства iOS от устройств на Android и Windows, которые также имеют сенсорные экраны.
// Попробуй, коснись меня!
const hasTouch = 'ontouchend' in document;
Регулярные выражения и navigator.platform
С помощью этих проверок вы можете отсеять устройства, которые не относятся к iOS:
// Попался, iOS, тебя не обойти мои регулярные выражения!
const isIOS = /iPhone|iPad|iPod/.test(navigator.platform);
Определение возможностей HTML5 с помощью Modernizr
Modernizr — это инструмент, который позволяет определить поддержку функций HTML5. В сочетании с проверками платформы это может выявить уникальные особенности iOS.
// Использование Modernizr — это не просто модно, это неотъемлемая часть работы!
const isIOS = Modernizr.touch && /iPhone|iPad|iPod/.test(navigator.platform);
Особенности воспроизведения видео на iOS
iOS обладает специфическими особенностями в плане воспроизведения видео, что также может быть использовано для определения устройств:
// Люблю, когда воспроизводишь видео, но только встроенным плеером
const supportsInlineVideo = 'playsInline' in document.createElement('video');
Звуковые особенности iOS
В версиях iOS до 12 включительно громкость звуковых элементов не могла быть контролирована при помощи JavaScript, что мы можем использовать для определения:
// Тихо! С iOS ты сам не решаешь, насколько будет громко.
const hasIOSAudioQuirk = typeof Audio !== 'undefined' && !(new Audio()).canControlVolume;
Переменная для упрощения кода
Для удобства введём переменную, которая сокращает и упрощает последующий код.
// iOS в коде: история одной переменной
let _iOSDevice = isIOS;
Дополнительные соображения
Расширения для браузеров, замаскированные под iOS
Расширения для браузеров и пользовательская модификация userAgent или platform могут затруднить точное определение. Будьте настороже.
Особенности старых версий IE
Если вы работаете со старыми версиями браузеров, не забывайте проверять Internet Explorer:
// Неожиданный гость — IE. Стоит ли его впускать?
const isIE = /*@cc_on!@*/false || !!document.documentMode;
Особенности iOS 13
С выходом iOS 13 парадигма определения iPad как мобильного устройства изменилась. Теперь это может вызвать заблуждение, поэтому стоит учитывать эту особенность.