Erkennen, ob das Gerät iOS ist

Question

Ich frage mich, ob es möglich ist, zu erkennen, ob ein Browser auf iOS läuft, ähnlich wie bei der Feature-Erkennung mit Modernizr (obwohl dies offensichtlich eine Geräteerkennung und keine Feature-Erkennung ist).

Normalerweise würde ich Feature-Erkennung bevorzugen, aber ich muss herausfinden, ob ein Gerät iOS ist, aufgrund der Art und Weise, wie sie Videos behandeln, wie in dieser Frage YouTube API not working with iPad / iPhone / non-Flash device

Answer 1

IOS erkennen

Mit iOS 13 iPad sind sowohl der User-Agent als auch die Plattform-Strings geändert und die Unterscheidung zwischen iPad und MacOS scheint möglich, daher müssen jetzt alle unten stehenden Antworten das berücksichtigen.

Das könnte die kürzeste Alternative sein, die auch iOS 13 abdeckt:

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad unter iOS 13 erkennen
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

iOS wird entweder true oder false sein

Schlechtere Option: User-Agent-Sniffing

Das User-Agent-Sniffing ist gefährlicher und es treten oft Probleme auf.

Auf dem iPad iOS 13 ist der User-Agent identisch mit dem eines MacOS 13-Computers, aber wenn Sie iPads ignorieren, könnte dies für eine Weile immer noch funktionieren:

var iOS = !window.MSStream && /iPad|iPhone|iPod/.test(navigator.userAgent); // schlägt bei iPad iOS 13 fehl

Das !window.MSStream dient dazu, die fälschliche Erkennung von IE11 zu vermeiden, siehe hier und hier.

Hinweis: Sowohl navigator.userAgent als auch navigator.platform können vom Benutzer oder einer Browsererweiterung gefälscht werden.

Browsererweiterungen zum Ändern von User-Agent oder Plattform existieren, weil Websites zu stark von Erkennungsmethoden abhängen und häufig einige Funktionen deaktivieren, auch wenn der Browser des Benutzers diese Funktionen anderweitig nutzen könnte.

Zur Deeskalation dieses Konflikts mit Benutzern wird empfohlen, speziell für jeden Fall die genauen Funktionen zu erkennen, die Ihre Website benötigt. Wenn der Benutzer dann einen Browser mit der benötigten Funktion erhält, funktioniert es bereits ohne zusätzliche Codeänderungen.

iOS-Version erkennen

Die gängigste Methode zur Erkennung der iOS-Version erfolgt durch Analyse aus dem User-Agent-String. Aber es gibt auch Feature Erkennung Schlussfolgerung*;

Wir wissen, dass die history API in iOS4 eingeführt wurde - matchMedia API in iOS5 - webAudio API in iOS6 - WebSpeech API in iOS7 und so weiter.

Hinweis: Der folgende Code ist nicht zuverlässig und wird brechen, wenn eines dieser HTML5-Features in einer neueren iOS-Version veraltet wird. Sie wurden gewarnt!

function iOSversion() {

  if (iOS) { // <-- Verwenden Sie den oben stehenden
    if (window.indexedDB) { return 'iOS 8 und höher'; }
    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 oder früher';
  }

  return 'Kein iOS-Gerät';
}

Answer 2

Nach iOS 13 sollten Sie iOS-Geräte wie folgt erkennen, da das iPad nicht mehr auf herkömmliche Weise als iOS-Gerät erkannt wird (aufgrund neuer "Desktop"-Optionen, die standardmäßig aktiviert sind):

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

Die erste Bedingung für iOS < 13 oder das iPhone oder das iPad mit deaktiviertem Desktop-Modus, die zweite Bedingung für iPadOS 13 in der Standardkonfiguration, da es sich wie ein Macintosh Intel positioniert, aber tatsächlich der einzige Macintosh mit Multi-Touch ist.

Eher ein Hack als eine echte Lösung, aber es funktioniert bei mir zuverlässig

P.S. Wie bereits erwähnt, sollten Sie wahrscheinlich eine IE-Überprüfung hinzufügen

let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream

Answer 3

Keine der bisherigen Antworten hier funktioniert für alle gängigen Browser auf allen Versionen von iOS, einschließlich iOS 13. Hier ist eine Lösung, die für Safari, Chrome und Firefox auf allen iOS-Versionen funktioniert:

var isIOS = (function () {
    var iosQuirkPresent = function () {
        var audio = new Audio();

        audio.volume = 0.5;
        return audio.volume === 1;   // Volumen kann auf iOS 12 und darunter nicht von "1" geändert werden
    };

    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var isAppleDevice = navigator.userAgent.includes('Macintosh');
    var isTouchScreen = navigator.maxTouchPoints >= 1;   // gilt für iOS 13 (und hoffentlich länger)

    return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));
})();

Beachten Sie, dass dieser Codeausschnitt mit Schwerpunkt auf Lesbarkeit und nicht auf Kürze oder Leistung geschrieben wurde.

Erklärung:

• Wenn der User-Agent eines der Elemente "iPod|iPhone|iPad" enthält, handelt es sich offensichtlich um ein iOS-Gerät. Andernfalls fahren Sie fort...

• Jeder andere User-Agent, der nicht "Macintosh" enthält, ist kein Apple-Gerät und kann daher kein iOS-Gerät sein. Andernfalls handelt es sich um ein Apple-Gerät, fahren Sie also fort...

• Wenn maxTouchPoints einen Wert von 1 oder größer hat, hat das Apple-Gerät einen Touchscreen und muss daher iOS sein, da es keine Macs mit Touchscreens gibt (Dank an kikiwora für die Erwähnung von maxTouchPoints). Beachten Sie, dass maxTouchPoints für iOS 12 und darunter als undefined ist, daher benötigen wir für dieses Szenario eine andere Lösung...

• iOS 12 und darunter haben eine Eigenart, die es in Mac OS nicht gibt. Die Eigenart besteht darin, dass die volume-Eigenschaft eines Audio-Elements nicht erfolgreich auf einen anderen Wert als 1 gesetzt werden kann. Dies liegt daran, dass Apple keine Lautstärkeänderungen am Audio-Element für iOS-Geräte erlaubt, aber für Mac OS. Diese Eigenart kann als endgültige Methode verwendet werden, um ein iOS-Gerät von einem Mac OS-Gerät zu unterscheiden.

Answer 4

Dies setzt die Variable _iOSDevice auf true oder false

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

Answer 5

UPDATE: Meine originale Antwort deckt nicht das iPad im Desktop-Modus ab (der Standard wechselt im kommenden iPadOS 13 und höher in den Desktop-Modus).
Das ist für meine Anwendungsfälle in Ordnung, wenn es für dich nicht stimmt, benutze dieses Update:

// iPhone und iPad inklusive iPadOS 13+, unabhängig von den Desktop-Modus-Einstellungen

iOSiPadOS = /^iP/.test(navigator.platform) ||
           /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4;

• Dies sollte sicher sein, solange
  • Desktop-Macs überhaupt keine Touch-Ereignisse unterstützen
  • oder nicht mehr als 4 Touchpoints (aktuelle iOS-Geräte unterstützen 5 Touchpoints)
• Es ist schnell, weil das Regexp ^ zuerst die Startposition des Plattformstrings überprüft und stoppt, wenn kein "iP" vorhanden ist (schneller als das Suchen des langen UA-Strings bis zum Ende in jedem Fall)
• Es ist sicherer als die Überprüfung von navigator.userAgent, da navigator.platform viel weniger wahrscheinlich gefälscht wird
• Erkennt iPhone / iPad Simulator

---

ORIGINAL ANTWORT:
Wow, hier ist viel längerer und kniffliger Code. Halte es bitte einfach!

Dieser hier ist meiner Meinung nach schnell, sicher und funktioniert gut:

iOS = /^iP/.test(navigator.platform);

  // oder, wenn du es lieber ausführlich magst:
 iOS = /^(iPhone|iPad|iPod)/.test(navigator.platform);