Определение устройства 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 как мобильного устройства изменилась. Теперь это может вызвать заблуждение, поэтому стоит учитывать эту особенность.