Determinare se l'utente navigato da Safari Mobile

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

Domanda

Ho un app, e mi piacerebbe per reindirizzare gli utenti a pagine diverse in base a dove si sta navigando da.

Se la navigazione dal web clip, non reindirizzare. Se la navigazione da cellulare Safari, reindirizzare safari.aspx. Se la navigazione da qualsiasi altro luogo, reindirizzamento a unavailable.aspx

Sono stato in grado di utilizzare iPhone WebApps, c'è un modo per rilevare come è stato caricato? Schermata vs Safari? per determinare se l'utente è stato navigando da un web clip, ma sto avendo difficoltà per determinare se l'utente navigato da Safari mobile su un iPhone o iPod.

Ecco quello che ho: 

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";
}
È stato utile?

Soluzione

Aggiorna : Questa è una risposta molto vecchio e non posso eliminarlo perché la risposta è stata accettata. Controllare la risposta di inconsapevole sotto per una soluzione migliore.

Si dovrebbe essere in grado di verificare la "iPad" o "iPhone" sottostringa nella user agent stringa: 

var userAgent = window.navigator.userAgent;

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

Altri suggerimenti

https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - le stringhe user agent per Safari su iOS e per Chrome su iOS sono scomodi simili:

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

sembra che l'approccio migliore è quello di verificare innanzitutto per iOS come altre risposte hanno suggerito e poi filtro sul roba che rende il Safari UA unico, che vorrei suggerire è meglio realizzato con "è AppleWebKit e non è 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);

pratica migliore è: 

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

Caduta codice di trovare solo Safari Mobile e niente altro (ad eccezione di delfini e altri piccoli browser) 

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

Fusione tutte le risposte e commenti. E questo è il risultato. 

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

Vedendo tutte le risposte, ecco alcuni suggerimenti circa le regex proposti:

  • AppleWebKit corrisponde Desktop Safari troppo (non solo mobili)
  • non c'è bisogno di chiamata .match più di una volta per tali regex semplici, e preferiscono il metodo .test più leggero.
  • il g (global) regex è inutile, mentre il i (case insensitive) può essere utile
  • non è necessario per la cattura (parentesi), stiamo solo testando la stringa

sto solo usando questo dato ottenendo true per cellulari Chrome è OK per me (stesso comportamento): 

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

(voglio solo rilevare se il dispositivo è un obiettivo per un app iOS)

In realtà, non v'è un proiettile d'argento di rilevare Safari Mobile. Ci sono alcuni browser possono utilizzare le parole chiave del l'agente utente di Safari Mobile. Forse si può provare il rilevamento feature e tenere aggiornata la regola.

I upvoted @unwitting 's risposta, in quanto inevitabilmente mi ha fatto andare avanti. Tuttavia, quando il rendering mia SPA in iOS Webview, avevo bisogno di modificarlo un po '. 

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 differenza dell'essere, il cambiamento del nome webkit a webkitUa, in modo da impedire scontrandosi con l'oggetto principale webkit usato come un gestore di messaggi tra la SPA & UIView. 

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

So che questo è un vecchio thread, ma vorrei condividere la mia soluzione con voi ragazzi.

mi serviva per rilevare quando un utente si sposta dal desktop di Safari (Perché siamo nel bel mezzo 2017, e Apple non ha dare alcun supporto per input[type="date"] ANCORA ...

Quindi, ho fatto un datepicker fallback personalizzato per esso). Ma vale solo per safari in tavolo perché questo tipo di ingresso funziona bene in Safari mobile. Così, ho fatto questo Regex per rilevare solo desktop di Safari. Ho già provato e non corrisponde con Opera, Chrome, Firefox o Safari Mobile.

La speranza può aiutare alcuni di voi ragazzi. 

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

Ero alla ricerca di questa risposta e mi sono ricordata mi sono imbattuto in questo prima.

Il modo più affidabile per rilevare Safari su iOS in JavaScript è 

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

or 

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

Per qualche ragione Safari su iOS restituisce 0 per la proprietà e la proprietà window.outerHeight window.outerWidth.

Questo è per tutte iPad e iPhone su tutte le versioni di iOS. Ogni altro browser e dispositivo di questa proprietà funziona normalmente.

Non so se hanno intenzione di cambiare questo, ma per ora funziona bene.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top