Ermitteln Sie, ob Benutzer von mobilen Safari navigiert

StackOverflow https://stackoverflow.com/questions/3007480

Frage

Ich habe eine app, und ich möchte die Benutzer auf verschiedene Seiten umleiten auf, wo sie von der Navigation.

Wenn von Web-Clip zu navigieren, leitet nicht. Wenn von mobilen Safari-Navigation, Umleitung zu safari.aspx. Wenn von anderswo Navigation, Umleitung zu unavailable.aspx

Ich konnte Gebrauch iPhone WebApps, gibt es eine Möglichkeit, wie man erkennt sie geladen? Home Screen vs Safari? , um festzustellen, ob der Benutzer wurde von einem Web-Clip zu navigieren, aber ich habe Probleme bei der Bestimmung, ob der Benutzer von mobiler Safari auf einem iPhone oder iPod navigiert.

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";
}
War es hilfreich?

Lösung

UPDATE : Dies ist eine sehr alte Antwort, und ich kann es nicht gelöscht werden, da die Antwort akzeptiert wird. Überprüfen Sie unwissentlich Antwort unten für eine bessere Lösung.

Es sollte möglich sein, für das "iPad" zu überprüfen oder "iPhone" Teil in der User-Agenten string: 

var userAgent = window.navigator.userAgent;

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

Andere Tipps

Siehe https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - der User-Agent-Strings für Safari auf iOS und für Chrome auf iOS sind unzweckmäßig ähnlich:

Chrome

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 aus wie der beste Ansatz ist hier zunächst einmal prüfen für iOS als andere Antworten vorgeschlagen haben, und dann Filter auf dem Material, das das Safari UA einzigartig macht, die ich vorschlagen würde, am besten erreicht mit „AppleWebKit ist und nicht Crios „: 

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

best practice ist: 

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

Fallen Code nur mobile Safari und sonst nichts (außer Delphin und anderer kleinen Browser) 

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

Eingebunden alle Antworten und Kommentare. Und 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));
}



var iOSSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && /WebKit/i.test(window.navigator.userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(window.navigator.userAgent));

Sehen alle Antworten, hier sind einige Tipps zu den vorgeschlagenen Regexes:

  • AppleWebKit Spiele Desktop-Safari auch (nicht nur mobil)
  • keine Notwendigkeit, Anruf .match mehr als einmal für eine solche einfache reguläre Ausdrücke, und bevorzugen die leichtere .test Methode.
  • die g (global) regex Flagge ist nutzlos, während die i (Groß- und Kleinschreibung) nützlich sein kann
  • keine Notwendigkeit für die Aufnahme (Klammern), testen wir nur die Zeichenfolge

Ich verwende diese nur da true für mobile Chrome bekommen ist OK für mich (gleiches Verhalten): 

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

(Ich will nur erkennen, ob das Gerät ein Ziel für einen iOS-App ist)

Eigentlich gibt es keine Allheilmittel mobile Safari zu erfassen. Es gibt ziemlich wenige Browser die Schlüsselwörter des User-Agent des mobilen Safari verwenden. Vielleicht können Sie Feature-Erkennung versuchen, die Regel halten zu aktualisieren.

I upvoted ‚s Antwort @unwitting, wie es mir unweigerlich in Gang gekommen. Wenn jedoch mein SPA in einer iOS Webview-Rendering, ich brauchte es ein wenig zwicken. 

function is_iOS () {
    /*
        Returns whether device agent is iOS Safari
    */
    var ua = navigator.userAgent;
    var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
    var webkitUa = !!ua.match(/WebKit/i);

    return typeof webkit !== 'undefined' && iOS && webkit && !ua.match(/CriOS/i);
};

Der Hauptunterschied ist, die Umbenennung von webkit zu webkitUa, so dass sie mit der Wurzel webkit Objekt als Nachrichten-Handler zwischen dem SPA & UIView, das zur Vorbeugung clashing. 

function isIOS {
  var ua = window.navigator.userAgent;
  return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}

Ich weiß, das ist ein alter Thread, aber ich möchte meine Lösung mit euch teilen.

Ich musste erkennen, wenn ein Benutzer navigiert von Desktop-Safari (Weil wir in der Mitte 2017 sind, und Apple hat gibt keine Unterstützung für input[type="date"] NOCH ...

So habe ich einen Rückfall benutzerdefinierte Datepicker für sie). Aber gilt nur in Desktop-Safari, weil das Eingabetyp fein in mobiler Safari funktioniert. Also, habe ich diese Regex nur Desktop-Safari zu erkennen. Getestet habe ich es bereits und es funktioniert nicht mit Opera, Chrome, Firefox oder Safari Handy anzeigen lassen.

Hope es können einige von euch helfen. 

if(userAgent.match(/^(?!.*chrome).(?!.*mobile).(?!.*firefox).(?!.*iPad).(?!.*iPhone).*safari.*$/i)){
  $('input[type="date"]').each(function(){
    $(this).BitmallDatePicker();
  })
}

Ich war auf der Suche für diese Antwort, und ich erinnerte ich mich über das kam vor.

Der zuverlässigste Weg, Safari auf iOS in JavaScript zu erkennen ist 

if (window.outerWidth === 0) {
    // Code for Safari on iOS
} 

or 

if (window.outerHeight === 0) {
    // Code for Safari on iOS
}

Aus irgendeinem Grund Safari auf iOS liefert 0 für window.outerHeight Eigentum und window.outerWidth Eigenschaft.

Dies ist für alle iPads und iPhones in allen Versionen von iOS. Jeder andere Browser und Gerät diese Eigenschaft funktioniert normal.

Nicht sicher, ob sie beabsichtigen, dies zu ändern, aber jetzt funktioniert es gut.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top