web-dev-qa-db-fra.com

Déterminer si l'utilisateur a navigué depuis Safari mobile

J'ai une application et j'aimerais rediriger les utilisateurs vers différentes pages en fonction de l'endroit où ils naviguent.

Si vous naviguez à partir d’un clip Web, ne redirigez pas . Si vous naviguez depuis Safari mobile, redirigez-le vers safari.aspx . Si vous naviguez de partout ailleurs, redirigez-vous vers le fichier indisponible.aspx

J'ai pu utiliser les applications Web iPhone, existe-t-il un moyen de détecter le mode de chargement? Écran d'accueil vs Safari? pour déterminer si l'utilisateur naviguait à partir d'un clip Web, mais je ne parviens pas à déterminer s'il a navigué depuis Safari mobile sur un iPhone ou un 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";
}
javascriptiphonemobile-safariweb-clips
48
Steven

UPDATE: C'est une très vieille réponse et je ne peux pas la supprimer car la réponse est acceptée. Vérifiez réponse involontaire ci-dessous pour une meilleure solution.

Vous devriez pouvoir vérifier la chaîne "iPad" ou "iPhone" dans le user agent string:

var userAgent = window.navigator.userAgent;

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

la meilleure pratique est:

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

Le code en baisse ne trouve que les safaris mobiles et rien d’autre (sauf les dauphins et autres petits navigateurs)

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

Fusionné toutes les réponses et les 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));
3
Константин Ван

Voyant toutes les réponses, voici quelques conseils sur les RegEx proposés:

  • AppleWebKit correspond également à Desktop Safari (pas seulement mobile)
  • pas besoin d'appeler .match plus d'une fois pour de telles expressions rationnelles simples, et préférez la méthode plus légère .test.
  • le drapeau regex g (global) est inutile alors que le i (insensible à la casse) peut être utile
  • pas besoin de capture (parenthèse), nous testons simplement la chaîne

J'utilise cela depuis que true pour Chrome mobile me convient (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)

2
antoine129

J'ai voté la réponse de @unwitting, car elle m'a inévitablement fait avancer. Cependant, lors du rendu de mon SPA dans une vue Web iOS, je devais le modifier légèrement. 

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 en webkitUa, afin d'éviter tout conflit avec l'objet racine webkit utilisé comme gestionnaire de messages entre SPA & UIView.

1
pimbrouwers

En fait, il n’ya pas de solution miracle pour détecter un safari mobile. Il existe de nombreux navigateurs qui peuvent utiliser les mots-clés de l'agent utilisateur de Safari mobile. Peut-être que vous pouvez essayer la détection de fonctionnalités et continuer à mettre à jour la règle.

1
Light

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

Je devais détecter quand un utilisateur naviguait depuis Desktop Safari (car nous sommes au milieu de 2017, et Apple ne fournit aucun support pour input[type="date"] ENCORE ...

Donc, j'ai fait un sélecteur de date personnalisé de secours). Mais ne s'applique qu'à Safari dans le bureau, car ce type d'entrée fonctionne correctement dans Safari mobile. J'ai donc créé cette Regex pour détecter uniquement le bureau Safari. Je l'ai déjà testé et il ne correspond pas à Opera, Chrome, Firefox ou Safari Mobile. 

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

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

Je cherchais cette réponse et je me suis rappelé que je l'avais déjà vue auparavant. 

Le moyen le plus fiable de 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 quelconque, Safari sur iOS renvoie 0 pour les propriétés window.outerHeight et window.outerWidth. 

Ceci est valable pour tous les iPad et iPhone sur toutes les versions d'iOS. Tous les autres navigateurs et périphériques, cette propriété fonctionne normalement.

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

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