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

Question

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

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

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

577

javascript ios browser browser-feature-detection

Источник

user664806 27 янв '12 в 19:02

25 ответов

Решение

После iOS13 вы должны обнаруживать такие устройства 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

69

Источник

user8141336 23 сен '19 в 18:03

Ни один из предыдущих ответов здесь не работает для всех основных браузеров во всех версиях 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, поскольку нет компьютеров Mac с сенсорными экранами (слава kikiwora за упоминание maxTouchPoints). Обратите внимание, чтоmaxTouchPoints является undefined для iOS 12 и ниже, поэтому нам нужно другое решение для этого сценария...
В iOS 12 и ниже есть особенность, которой нет в Mac OS. Причуда в том, чтоvolume собственность Audio элемент не может быть успешно установлен на любое значение, кроме 1. Это потому, что Apple не разрешает изменять громкость наAudioдля устройств iOS, но есть для Mac OS. Эту причуду можно использовать в качестве последнего запасного метода для отличия устройства iOS от устройства Mac OS.

22

Источник

user4143417 30 май '20 в 00:20

Это устанавливает переменную _iOSDevice правда или ложь

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

20

Источник

user938822 08 авг '13 в 19:03

Если вы используете 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');
}

10

Источник

user652579 27 май '13 в 08:18

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

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

 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 (если предположить, что navigator.platform менее поддельный)
Обнаруживает iPhone / iPad Simulator

10

Источник

user5807141 21 сен '18 в 17:55

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

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

8

Источник

user1362907 18 мар '14 в 00:20

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

8

Источник

user1756087 18 окт '12 в 11:25

Обнаружение iOS (как <12, так и 13+)

Вики сообщества, поскольку очередь редактирования говорит, что она заполнена, а все остальные ответы в настоящее время устарели или неполны.

const iOS_1to12 = /iPad|iPhone|iPod/.test(navigator.platform);

const iOS13_iPad = (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));

const iOS1to12quirk = function() {
  var audio = new Audio(); // temporary Audio object
  audio.volume = 0.5; // has no effect on iOS <= 12
  return audio.volume === 1;
};

const isIOS = !window.MSStream && (iOS_1to12 || iOS13_iPad || iOS1to12quirk());

6

Источник

user296639 05 окт '20 в 14:11

Наверное, стоит ответить, что iPad под управлением iOS 13 будет иметь navigator.platform установлен в MacIntel, а это значит, что вам нужно будет найти другой способ обнаружения устройств iPadOS.

5

Источник

user108159 21 июл '19 в 17:53

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

3

Источник

user634844 27 янв '12 в 19:06

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

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

    }

3

Источник

user659696 05 дек '12 в 04:24

Нет необходимости тестировать navigator.userAgent или же navigator.platform:

      const isIOS = typeof navigator.standalone === 'boolean';

navigator.standaloneустанавливается только в iOS Safari. См. MDN, Справочник по Safari HTML .

2

Источник

user311572 18 июн '21 в 12:45

Если вы используете React, для такого рода проблем есть отличная библиотека: REACT-UGENT. (Создан с использованием ua-parser-js.)

https://github.com/medipass/react-ugent

Доступные браузеры:

хром, хром, край, firefox, т.е. рысь, сафари, опера

Доступные ОС:

Android, Blackberry, Chrome OS, Debian, iOS, Linux, Mac OS, Ubuntu, Unix, Windows

Доступные устройства:

консоль, компьютер, мобильный, планшет, smarttv, носимый, встроенный

Легко использовать как:

      <Ugent browser="safari" os="ios">
  <div>
    This text only shows on Safari on iOS.
  </div>
</Ugent>

Если вы не используете React, вы можете использовать - ua-parser-js

https://github.com/faisalman/ua-parser-js

2

Источник

user4662722 14 сен '21 в 15:30

Везде, где возможно, при добавлении тестов 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

Источник

user16940 10 май '14 в 19:23

Если вы все еще пытаетесь проверить, iOS это или нет, я рекомендую вам использовать этот подход:

Создайте папку под названиемhelper
Создайте файл с именемplatform.tsилиplatform.js
Экспорт функции:

      export const isIOS = () => {
    let platform = navigator?.userAgent || navigator?.platform || 'unknown'

    return /iPhone|iPod|iPad/.test(platform)
}

Результат будет trueесли это iPhoneили iPodили Ipadили это будет falseв противном случае.

Вы спросите, а зачем мне проверятьnavigator.userAgent || navigator.platform, причина проста: второй вариант использовался по умолчанию, но теперь он устарел, и некоторые браузеры перестанут поддерживать его в будущем, первый вариант более надежен.

Вы можете проверить здесь об устаревании, о котором я упоминал выше:

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#:~:text=Deprecated%3A%20This%20feature%20is%20no,be%20kept%20for%20compatibility%20целей .

Регистрация`userAgentData`,`userAgent`и`platform`.

Используя функцию ниже, я получил эти журналы:

          console.log({
        userAgentData: navigator?.userAgentData?.platform,
        userAgent: navigator?.userAgent,
        platform: navigator?.platform,
    })

    {
        "userAgentData": "",
        "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
        "platform": "MacIntel"
    }

Я тестировал его на своем Macbook, и он работал в разных браузерах и операционных системах. Итак, как видитеnavigator?.userAgentData?.platformне будет работать вообще.

Я также не получил никаких ошибок, связанных с моим машинописным текстом, хотя я использую React для вызова этой функции .

Бонус, это Android

Если вам интересно, как проверить, является ли платформа Android, я предлагаю вам не следовать идее делать противоположноеisIOSкак:

      const isAndroid = !isIOS();

Причина довольно проста, это не сработает, так как десктопы будут распознаны как платформа Android. Чтобы решить эту проблему, вам просто нужно сделать эту проверку:

      export const isAndroid = () => {
    const ua = navigator.userAgent.toLowerCase() + navigator?.platform.toLowerCase();
    const isAndroid = ua.indexOf("android") > -1;

    return isAndroid;
}

Причина, по которой мы проверяемnavigator.userAgentплюсnavigator?.platformзаключается в поддержке старых браузеров и новых.

2

Источник

user9510481 09 окт '22 в 09:40

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

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

1

Источник

user2310882 06 июн '19 в 16:25

Вы также можете использовать includes

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

0

Источник

user5449450 27 май '20 в 08:17

Для всех, кто хочет соответствовать рекомендациям PageSpeed Insights и Lighthouse, которые помечают «проблемы», обнаруженные в консоли, для использованияnavigator.userAgent(и т. д.), это может вам помочь (я почерпнул это из Boostrap 5):

      function getUAString() {
    let uaData = navigator.userAgentData;
    if (null !== uaData && uaData.brands) {
        return uaData.brands.map(item => item.brand + '/' + item.version).join(' ');
    }
    return navigator.userAgent;
}

const isIOS = /iP(hone|od|ad)/.test(getUAString());

0

Источник

user486233 21 май '23 в 23:37

это было мое решение после многих страданий, оно не идеально, но надеюсь помочь кому-нибудь.

      function detectSafariOnIpadOS() {
  var userAgent = navigator.userAgent;
  var isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
  var isIpad = /iPad/i.test(userAgent);
  var isMacintosh = /Macintosh/i.test(userAgent);
  var isTouchDevice = "ontouchend" in document;

  console.log("User Agent:", userAgent);
  console.log("detectSafariOnIpadOS result:", isSafari && (isIpad || (isMacintosh && isTouchDevice)));

return isSafari && (isIpad || (isMacintosh && isTouchDevice));
}

0

Источник

Edi 01 сен '23 в 20:52

Используйте проверки Apple Pay JS API

`if (window.dw && window.dw.applepay && window.ApplePaySession && window.ApplePaySession.canMakePayments()) {

// сделать все необходимое

}`

0

Источник

user4099837 19 сен '23 в 10:25

Потому что navigator.platformустарел, и лучше его больше не использовать, я хочу добавить другое решение.

Вы можете фильтровать в системах MacOS, проверив navigator.vendor. Когда результат Apple Computer, Inc., вы знаете, что это MacOS.

0

Источник

user4417425 16 ноя '21 в 18:04

В моем случае пользовательский агент был недостаточно хорош, так как в 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
}

-1

Источник

user12238980 04 май '20 в 13:40

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

-2

Источник

user174261 12 фев '13 в 17:45

Чтобы определить версию 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;
    }

-2

Источник

user813665 19 фев '12 в 16:05

Другие вопросы по тегам javascript ios browser browser-feature-detection

user1029952 27 янв '12 в 20:51 2012-01-27 20:51 · Accepted Answer · 2012-01-27 20:51

Обнаружение 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):

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

Наиболее распространенный способ определения версии 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

25 ответов

Обнаружение iOS

Почему не MSStream

Определение версии iOS

Обнаружение iOS (как <12, так и 13+)

РегистрацияuserAgentData,userAgentиplatform.

Бонус, это Android

Регистрация`userAgentData`,`userAgent`и`platform`.