wake-up-neo.com

Ermitteln Sie, ob das Gerät iOS ist

Ich frage mich, ob es möglich ist, zu erkennen, ob ein Browser unter iOS ausgeführt wird, ähnlich wie Sie mit Modernizr Funktionen erkennen können (obwohl dies offensichtlich eher eine Geräteerkennung als eine Funktionserkennung ist).

Normalerweise würde ich stattdessen die Feature-Erkennung bevorzugen, aber ich muss anhand dieser Frage herausfinden, ob ein Gerät iOS ist, da es mit Videos nicht funktioniert. YouTube-API funktioniert nicht mit iPad/iPhone/Nicht-iPhone Flash-Gerät

javascriptiosbrowserbrowser-feature-detection
363
SparrwHawk

IOS erkennen

Ich bin kein Fan von User Agent Sniffing, aber hier ist, wie Sie es tun würden:

_var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
_

Ein anderer Weg ist, sich auf _navigator.platform_ zu verlassen:

_var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
_

iOS ist entweder true oder false

Warum nicht MSStream?

Microsoft hat das Word iPhone in das userAgent von IE11 injiziert, um zu versuchen, Gmail irgendwie zu täuschen. Deshalb müssen wir es ausschließen. Mehr Infos dazu hier und hier .

Nachfolgend finden Sie das aktualisierte userAgent für IE11 (Internet Explorer für Windows Phone 8.1 Update):

Mozilla/5.0 (Mobil; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv: 11.0; IEMobile/11.0; NOKIA; Lumia 930) wie iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, wie Gecko) Mobile Safari/537

Fügen Sie ganz einfach weitere Geräte hinzu, ohne reguläre Ausdrücke zu verwenden:

_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() ist entweder true oder false

Hinweis: Sowohl _navigator.userAgent_ als auch _navigator.platform_ können vom Benutzer oder einer Browsererweiterung gefälscht werden.

Erkennen der iOS-Version

Die gängigste Methode zum Erkennen der iOS-Version ist Parsen anhand der User Agent-Zeichenfolge . Es gibt aber auch eine Funktion erkennung Inferenz * ;

Wir wissen, dass _history API_ in iOS4 - _matchMedia API_ in iOS5 - _webAudio API_ in iOS6 - _WebSpeech API_ in iOS7 und so weiter.

Hinweis: Der folgende Code ist nicht zuverlässig und funktioniert nicht mehr, wenn eine dieser HTML5-Funktionen in einer neueren iOS-Version nicht mehr unterstützt wird. Du wurdest gewarnt!

_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';
}
_
744
Pierre

Dies setzt die Variable _iOSDevice auf true oder false

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

Wenn Sie Modernizr verwenden, können Sie einen benutzerdefinierten Test hinzufügen.

Es spielt keine Rolle, für welchen Erkennungsmodus Sie sich entscheiden (userAgent, navigator.vendor oder navigator.platform), Sie können ihn jederzeit für eine spätere einfachere Verwendung einbinden.

//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
ThiagoPXP

Es gibt diese benutzerdefinierten Modernizr-Tests: https://Gist.github.com/855078

8
sgt9dg8s90

Eine vereinfachte, einfach zu erweiterende Version.

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

Wenn möglich, sollten Sie beim Hinzufügen von Modernizr-Tests einen Test für eine Funktion anstelle eines Geräts oder Betriebssystems hinzufügen. Es ist nichts Falsches daran, zehn Tests für alle iPhone-Tests hinzuzufügen, wenn es das ist, was es braucht. Einige Dinge können einfach nicht erkannt werden.

    Modernizr.addTest('inpagevideo', function ()
    {
        return navigator.userAgent.match(/(iPhone|iPod)/g) ? false : true;
    });

Beispielsweise kann auf dem iPhone (nicht auf dem iPad) ein Video nicht inline auf einer Webseite abgespielt werden, sondern es wird im Vollbildmodus geöffnet. Also habe ich einen Test 'no-inpage-video' erstellt

Sie können dies dann in CSS verwenden (Modernizr fügt dem Tag .no-inpagevideo eine Klasse <html> hinzu, wenn der Test fehlschlägt).

.no-inpagevideo video.product-video 
{
     display: none;
}

Dadurch wird das Video auf dem iPhone ausgeblendet (in diesem Fall wird ein alternatives Bild mit einem Klick zum Abspielen des Videos angezeigt - ich möchte nur nicht, dass der Standard-Videoplayer und die Wiedergabetaste angezeigt werden).

2
Simon_Weaver

Ich habe das vor ein paar Jahren geschrieben, aber ich glaube, es funktioniert immer noch:

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

    }
2
Michael Benin

In den Benutzeragenten auf iOS-Geräten steht iPhone oder iPad. Ich filtere nur nach diesen Schlüsselwörtern.

2
Bryan Naegele

Wow, hier ist eine Menge langwieriger, kniffliger Code. Halte es einfach, bitte!

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

 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);
  • Es ist schnell, weil der reguläre Ausdruck zuerst die ^ s Startposition des Plattform-Strings überprüft und stoppt, wenn kein "iP" vorhanden ist (schneller als das Durchsuchen der langen UA) String bis zum Ende)
  • Es ist sicherer als die UA-Prüfung (vorausgesetzt, navigator.platform ist weniger wahrscheinlich gefälscht)
  • Erkennt den iPhone/iPad Simulator
2
j.j.

Aktualisieren Sie die erste Antwort leicht mit einem funktionaleren Ansatz.

    const isIOS = [
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
      'iPad',
      'iPhone',
      'iPod',
    ]
      .map(device => navigator.platform === device)
      .filter(device => device)
      .reduce(() => true, false);
0
Sten Muchow

Es lohnt sich wahrscheinlich zu beantworten, dass auf iPads mit iOS 13 navigator.platform auf MacIntel eingestellt ist, was bedeutet, dass Sie einen anderen Weg finden müssen, um iPadOS-Geräte zu erkennen.

0
Justin Searls