Déterminer si l'utilisateur navigue de Safari mobile

Question

J'ai une application, et je voudrais les utilisateurs à rediriger les différentes pages en fonction de l'endroit où ils naviguent de.

Si la navigation du clip web, ne redirige pas. Si la navigation de Safari mobile, rediriger vers safari.aspx. Si la navigation de nulle part ailleurs, rediriger vers unavailable.aspx

J'ai pu utiliser iPhone WebApps, est-il un moyen de détecter la façon dont il a été chargé? Écran d'accueil vs Safari? pour déterminer si l'utilisateur naviguait d'un clip web, mais je vais avoir du mal à déterminer si l'utilisateur navigue à partir de Safari mobile sur un iPhone ou iPod.

Voici ce que j'ai:

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

Answer 1

UPDATE : Ceci est une réponse très ancienne et je ne peux pas le supprimer parce que la réponse est acceptée. Vérifiez la réponse sans le savoir ci-dessous pour une meilleure solution.

---

Vous devriez être en mesure de vérifier la sous-chaîne « iPad » ou « iPhone » dans le string:

var userAgent = window.navigator.userAgent;

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

Answer 2

Voir https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - les chaînes de l'agent utilisateur pour Safari sur iOS et Chrome pour iOS sur sont incommode similaires:

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

On dirait que la meilleure approche ici est tout d'abord de vérifier pour iOS que d'autres réponses ont suggéré, puis filtrer sur les choses qui rend le Safari UA unique, je suggérerais mieux est accompli avec « est AppleWebKit et n'est pas 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);

Answer 3

les meilleures pratiques est:

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

Answer 4

Code chute seulement trouver safari mobile et rien d'autre (à l'exception des dauphins et autres petits navigateurs)

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

Answer 5

Fusionné toutes les réponses et commentaires. Et voici le résultat.

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

Answer 6

Voir toutes les réponses, voici quelques conseils sur les expressions rationnelles proposées:

• correspond AppleWebKit bureau Safari trop (non seulement mobile)
• pas besoin d'appeler .match plus d'une fois pour des expressions rationnelles simples, et préfèrent la méthode .test plus léger.
• le g (global) regex est inutile alors que le i (insensible à la casse) peut être utile
• pas besoin de capture (entre parenthèses), nous testons simplement la chaîne

Je suis juste en utilisant ce depuis l'obtention true pour Chrome mobile est OK pour moi (même comportement):

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

(Je veux juste détecter si l'appareil est une cible pour une application iOS)

Answer 7

En fait, il n'y a pas une panacée de détection Safari mobile. Il y a assez peu de navigateurs peuvent utiliser les mots-clés de l'agent utilisateur de Safari mobile. Peut-être que vous pouvez essayer la détection de caractéristiques et de garder la mise à jour la règle.

Answer 8

J'upvoted @unwitting la réponse « , car il me inévitablement va se. Cependant, lors du rendu mon SPA dans un Webview iOS, je avais besoin de ruser un peu.

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

La différence principale étant le changement de nom de webkit à webkitUa, de manière à empêcher heurtant à l'objet racine webkit utilisé comme un gestionnaire de messages entre le SPA & UIView.

Answer 9

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

Answer 10

Je sais que c'est un vieux fil, mais je voudrais partager ma solution avec vous les gars.

Je avais besoin de détecter lorsqu'un utilisateur navigue de bureau Safari (Parce que nous sommes au milieu 2017, et Apple a donner aucun soutien pour input[type="date"] ... POURTANT

Alors, je fait un datepicker personnalisé solution de repli pour elle). Mais applique seulement pour safari dans le bureau, car ce type d'entrée fonctionne très bien dans Safari mobile. Alors, je fait ce Regex pour ne détecter que Safari de bureau. Je l'ai déjà testé et il ne correspond pas avec Opera, Chrome, Firefox ou Safari Mobile.

Espérons que cela peut aider certains des gars.

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

Answer 11

Je cherchais cette réponse et je me suis souvenu que je suis tombé sur ce auparavant.

La façon la plus fiable pour détecter Safari sur iOS en JavaScript est

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

or 

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

Pour une raison Safari sur iOS retourne 0 pour les biens et les biens window.outerHeight window.outerWidth.

Ceci est pour tous les iPads et iPhones sur toutes les versions d'iOS. Tous les autres navigateurs et le dispositif de cette propriété fonctionne normalement.

Je ne sais pas s'ils ont l'intention de changer cela, mais pour l'instant il fonctionne bien.