Déterminer si l'utilisateur a navigué à partir de mobiles Safari

Question

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

Si vous naviguez à partir d'un clip Web, ne le redirigez pas. Si vous naviguez à partir de Safari mobile, redirigez-le vers safari.aspx. Si la navigation de nulle part ailleurs, rediriger vers unavailable.aspx

j'ai pu utiliser iPhone WebApps, is there a way to detect how it was loaded? Home Screen 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 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

MISE À JOUR: 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 unwitting's answer below pour une meilleure solution.

---

Vous devriez être en mesure de vérifier la "iPad" ou substring "iPhone" dans la chaîne user agent:

var userAgent = window.navigator.userAgent; 

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

Answer 2

meilleures pratiques

est:

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

Answer 3

En fait, il n une balle d'argent de détection de safari mobile. Il y a quelques navigateurs qui peuvent utiliser les mots-clés de l'agent utilisateur du safari mobile. Peut-être que vous pouvez essayer la détection de fonctionnalités et continuer à mettre à jour la règle.

Answer 4

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 pour Chrome sur iOS 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 de vérifier tout d'abord pour iOS comme d'autres réponses ont suggéré, puis filtrer sur les choses qui rendent Safari UA unique, qui je pense est mieux accompli avec "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 5

Code chute trouver seulement 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 6

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

Answer 7

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 8

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

• AppleWebKit les matches de bureau Safari trop (non seulement mobile)
• pas besoin d'appeler .match plus d'une fois pour une telle simples regex, et préfèrent la méthode .test plus légère.
• 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 juste la chaîne

Je suis juste en utilisant cela 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 9

J'ai repoussé la réponse de @unwitting, car elle m'a inévitablement amené. Cependant, lors du rendu de mon SPA dans une Webview iOS, j'avais besoin de le modifier 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 principale différence é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 10

Je sais que c'est un vieux fil de discussion, mais j'aimerais partager ma solution avec vous.

je devais 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"] ... PAS ENCORE

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

J'espère que cela pourrait aider certains d'entre vous.

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