Bestimmen Sie, ob der Benutzer von Mobile Safari aus navigiert ist

Lesezeit: 6 Minuten

Benutzer-Avatar
Stefan

Ich habe eine App und möchte die Benutzer auf verschiedene Seiten umleiten, je nachdem, von wo aus sie navigieren.

Wenn Sie von einem Webclip aus navigieren, leiten Sie nicht um. Wenn Sie von Mobile Safari aus navigieren, leiten Sie zu safari.aspx um. Wenn Sie von einem anderen Ort aus navigieren, leiten Sie zu unavailable.aspx um

Ich konnte iPhone WebApps verwenden, gibt es eine Möglichkeit zu erkennen, wie es geladen wurde? Startbildschirm oder Safari? um festzustellen, ob der Benutzer von einem Webclip aus navigiert hat, aber ich habe Probleme festzustellen, ob der Benutzer von Mobile Safari auf einem iPhone oder iPod aus navigiert ist.

Hier ist, was ich habe:

if (window.navigator.standalone) {
    // user navigated from web clip, don't redirect
}
else if (/*logic for mobile Safari*/) {
    //user navigated from mobile Safari, redirect to safari page
    window.location = "safari.aspx";
}
else {
    //user navigated from some other browser, redirect to unavailable page
    window.location = "unavailable.aspx";
}

  • stackoverflow.com/questions/9038625/detect-if-device-is-ios

    – Ali

    1. September 2016 um 14:46 Uhr

  • @Ali Diese Frage verlangt nicht dasselbe wie diese

    – Jake Millington

    16. Februar 2017 um 22:55 Uhr

Benutzer-Avatar
unwissentlich

Sehen https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent – Die User-Agent-Strings für Safari unter iOS und für Chrome unter iOS sind unangenehm ähnlich:

Chrom

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3

Safari

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

Sieht so aus, als wäre der beste Ansatz hier, zuerst nach iOS zu suchen, wie andere Antworten vorgeschlagen haben, und dann nach den Dingen zu filtern, die Safari UA einzigartig machen, was meiner Meinung nach am besten mit “ist AppleWebKit und nicht CriOS” erreicht werden kann:

var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);

  • @fabricioflores c’est la vie 🙁

    – unwissentlich

    24. April 2015 um 10:34 Uhr

  • +1 Die einzige Antwort hier, die alle Spezifikationen abdeckte. Ich würde einfach die iOS-Test-Regex in ändern /iP(ad|hone)/i also brauchst du das oder nicht.

    – sared

    8. Oktober 2015 um 15:04 Uhr

  • @sareed Ich fand es immer erstaunlich befriedigend, iP(ad|od|hone) regexieren zu können.

    – unwissentlich

    30. Oktober 2015 um 10:31 Uhr

  • Dumme Opera unter iOS würde den obigen Code immer noch als wahr übergeben, also habe ich die letzte Zeile wie folgt geändert: var iOSSafari = iOS && webkit && !ua.match(/CriOS/i) && !ua.match(/OPiOS/i) ;

    – Hooman Askari

    16. November 2015 um 10:27 Uhr

  • Gute Antwort. Aber warum ein doppeltes Negativ (!!) mit Übereinstimmung verwenden, wenn Sie test() verwenden können?

    – Oma

    18. Januar 2016 um 18:06 Uhr


Benutzer-Avatar
Daniel Wassallo

AKTUALISIEREN: Dies ist eine sehr alte Antwort und ich kann sie nicht löschen, da die Antwort akzeptiert wird. Überprüfen Sie die Antwort von unwitting unten für eine bessere Lösung.


Sie sollten in der Lage sein, nach der Teilzeichenfolge „iPad“ oder „iPhone“ zu suchen User-Agent Zeichenfolge:

var userAgent = window.navigator.userAgent;

if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
   // iPad or iPhone
}
else {
   // Anything else
}

  • Ich denke, es ist nicht. Wie wäre es mit anderen iOS-Browsern als Safari? Ich denke, dieser Ausdruck schließt nicht nur Safari aus, sondern alle iPhone/iPad-Browser.

    – Kamilius

    31. März 2014 um 10:38 Uhr

  • Dies ist nicht die richtige Antwort, denn wenn ich von Chrome für iOS darauf zugreife, wird es wahr zurückgeben

    – Bobby Stenly

    14. Januar 2015 um 11:09 Uhr

  • Dies funktioniert nicht, da der Benutzer jetzt mit Mobile Chrome auf iOS surfen könnte und dies immer noch wahr zurückgeben würde, obwohl es nicht Mobile Safari ist.

    – Jangosteve

    19. Januar 2015 um 17:04 Uhr

  • Dies erkennt nicht, ob der Benutzer beispielsweise mobiles Chrome verwendet. Und Chrome iOS hat eine sehr alte Javascript-Engine (aufgrund von Apples Richtlinien) im Vergleich zu Safari, was ein gewisses Rendering unmöglich macht.

    – AeroWang

    24. März 2015 um 20:57 Uhr

  • Dies sollte nicht als richtige Antwort markiert werden, da es jeden Browser umfasst, der auf dem iPhone läuft. Die Frage fragt speziell nach der Erkennung von Mobile Safari.

    – Schaschenk

    21. Juni 2017 um 5:35 Uhr

Best Practice ist:

function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}

  • Das würde auch für Chrome iOS passen 🙁 stackoverflow.com/a/13808053/668157

    – httpete

    15. April 2013 um 16:25 Uhr

  • Dadurch wird auch Mobile Chrome erkannt.

    – Sean

    8. Juli 2015 um 19:32 Uhr

  • Wie sollten wir dann zwischen iOS Safari und iOS Chrome unterscheiden? Irgendwelche Ideen?

    – Burak Karakuş

    11. Februar 2016 um 10:00 Uhr

  • Diese beiden Regexes können leicht kombiniert werden

    – antoine129

    29. September 2016 um 14:23 Uhr

  • das passt auch zu Desktop Safari.

    – antoine129

    29. September 2016 um 14:27 Uhr

Benutzer-Avatar
Константин Ван

Alle Antworten und Kommentare zusammengeführt. Das ist das Ergebnis.

function iOSSafari(userAgent) {
    return /iP(ad|od|hone)/i.test(userAgent) &&
      /WebKit/i.test(userAgent) &&
      !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent));
}


// Usage:
// if iOSSafari(window.navigator.userAgent) { /* iOS Safari code here */ }

// Testing:
var iPhoneSafari = [
  "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
  "Mozilla/5.0 (Apple-iPhone7C2/1202.466; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5370a Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1",
  "Mozilla/5.0 (iPhone9,3; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
  "Mozilla/5.0 (iPhone9,4; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
];
console.log("All true:", iPhoneSafari.map(iOSSafari));

var iPhoneNotSafari = [
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/13.2b11866 Mobile/16A366 Safari/605.1.15",
];
console.log("All false:", iPhoneNotSafari.map(iOSSafari));

Benutzer-Avatar
aWebDeveloper

Fallender Code findet nur mobile Safari und sonst nichts (außer Delphin und anderen kleinen Browsern)

  (/(iPad|iPhone|iPod)/gi).test(userAgent) &&
  !(/CriOS/).test(userAgent) &&
  !(/FxiOS/).test(userAgent) &&
  !(/OPiOS/).test(userAgent) &&
  !(/mercury/).test(userAgent)

  • Dies ist der einzige Unterschied zwischen Firefox und Opera unter iOS.

    – Nordstrom

    21. Juli 2016 um 12:22 Uhr

Benutzer-Avatar
Antonius129

Wenn Sie alle Antworten sehen, finden Sie hier einige Tipps zu den vorgeschlagenen RegExes:

  • AppleWebKit passt auch zu Desktop Safari (nicht nur mobil)
  • keine Notwendigkeit anzurufen .match mehr als einmal für solch einfache Regexes und bevorzuge die leichteren .test Methode.
  • das g (globales) Regex-Flag ist nutzlos, während die i (Groß-/Kleinschreibung beachten) kann nützlich sein
  • Es ist keine Erfassung erforderlich (Klammern), wir testen nur die Zeichenfolge

Ich benutze das nur, seit ich es bekommen habe true für mobile Chrome ist für mich in Ordnung (gleiches Verhalten):

/iPhone|iPad|iPod/i.test(navigator.userAgent)

(Ich möchte nur erkennen, ob das Gerät ein Ziel für eine iOS-App ist.)

  • Dies ist der einzige Unterschied zwischen Firefox und Opera unter iOS.

    – Nordstrom

    21. Juli 2016 um 12:22 Uhr

Benutzer-Avatar
Bellisario

Diese Regex funktioniert für mich, sauber und einfach:

const isIOSSafari = !!window.navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);

  • Dies funktioniert nicht mit eingebettetem WKWebView, wenn die Host-App nicht explizit hinzufügt Safari in eine benutzerdefinierte User-Agent-Zeichenfolge.

    – mrtrauert

    21. November 2019 um 1:58 Uhr

  • iPad Safari lügt jetzt standardmäßig.

    – Csaba Toth

    5. März 2020 um 19:29 Uhr

1115150cookie-checkBestimmen Sie, ob der Benutzer von Mobile Safari aus navigiert ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy