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

Wo immer möglich, sollten bei der Hinzufügung von Modernizr-Tests Tests für ein Feature und nicht für ein Gerät oder Betriebssystem hinzugefügt werden. Es ist nichts falsch daran, zehn Tests hinzuzufügen, die alle das iPhone testen, wenn das erforderlich ist. Einige Dinge können einfach nicht durch ein Feature erkannt werden.

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

Zum Beispiel auf dem iPhone (nicht auf dem iPad) kann Video nicht im Browser inline abgespielt werden, es wird im Vollbild geöffnet. Daher habe ich einen Test 'no-inpage-video' erstellt.

Dies kann dann in CSS verwendet werden (Modernizr fügt der -Tag-Klasse .no-inpagevideo hinzu, wenn der Test fehlschlägt)

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

Dies wird das Video auf dem iPhone ausblenden (in diesem Fall zeige ich tatsächlich ein alternatives Bild mit einem Klick, um das Video abzuspielen - ich möchte einfach nicht den Standard-Videoplayer und die Wiedergabetaste anzeigen).

Answer 2

Ich habe dies 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 oder 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("Kein Apple-basierter Browser");

    }

Answer 3

Wenn Sie React verwenden, gibt es eine großartige Bibliothek für diese Art von Problemen: REACT-UGENT. (Erstellt mit ua-parser-js.)

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

Verfügbare Browser sind:

chrome, chromium, edge, firefox, ie, lynx, safari, opera

Verfügbare Betriebssysteme sind:

android, blackberry, chromium os, debian, ios, linux, mac os, ubuntu, unix, windows

Verfügbare Geräte sind:

console, computer, mobile, tablet, smarttv, wearable, embedded

Einfach zu verwenden als:

    Dieser Text wird nur auf Safari auf iOS angezeigt.

Wenn Sie React nicht verwenden, können Sie ua-parser-js verwenden

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

Answer 4

Wenn Sie immer noch versuchen zu überprüfen, ob es sich um iOS handelt oder nicht, empfehle ich Ihnen, diesen Ansatz zu verwenden:

1. Erstellen Sie einen Ordner namens helper
2. Erstellen Sie eine Datei namens platform.ts oder platform.js

3. Exportieren Sie die Funktion isIOS:

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

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

   }

Das Ergebnis wird true sein, wenn es sich um ein iPhone oder iPod oder Ipad handelt, oder andernfalls wird es false sein.

Sie könnten fragen, warum ich navigator.userAgent || navigator.platform überprüfen muss, nun der Grund ist einfach, die zweite Option war früher die Standardoption, aber jetzt ist sie veraltet und einige Browser werden dies in Zukunft nicht mehr unterstützen, die erste ist zuverlässiger.

Sie können hier über die oben erwähnte Veraltetheit nachlesen:

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

Protokollieren der userAgentData, userAgent und platform.

Mit der folgenden Funktion habe ich diese Protokolle erhalten:

    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"
    }

Ich habe es auf meinem Macbook getestet und es hat auf verschiedenen Browsern und Betriebssystemen funktioniert. Wie Sie sehen können, wird navigator?.userAgentData?.platform überhaupt nicht funktionieren.

Ich habe auch keine Fehler in Bezug auf meinen TypeScript erhalten, obwohl ich React verwende, um diese Funktion aufzurufen.

Bonus, isAndroid

Wenn Sie sich fragen, wie Sie überprüfen können, ob es sich um eine Android-Plattform handelt, schlage ich vor, nicht der Idee zu folgen, das Gegenteil von isIOS zu tun, wie:

const isAndroid = !isIOS();

Der Grund ist recht einfach, es wird nicht funktionieren, da Desktops als Android-Plattform erkannt werden. Um dieses Problem zu lösen, müssen Sie diese Überprüfung durchführen:

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

    return isAndroid;
}

Der Grund, warum wir navigator.userAgent plus navigator?.platform überprüfen, ist, um alte Browser und die neuen zu unterstützen.

Answer 5

Die User-Agents auf iOS-Geräten enthalten die Begriffe iPhone oder iPad. Ich filtere nur basierend auf diesen Schlüsselwörtern.