Rileva gli utenti iPad usando jQuery?

Risposte:

317

Rilevazione iPad

Dovresti essere in grado di rilevare un utente iPad dando un'occhiata alla userAgentproprietà:

var is_iPad = navigator.userAgent.match(/iPad/i) != null;

Rilevazione iPhone / iPod

Allo stesso modo, la platformproprietà per verificare la presenza di dispositivi come iPhone o iPod:

function is_iPhone_or_iPod(){
     return navigator.platform.match(/i(Phone|Pod))/i)
}

Appunti

Mentre funziona, dovresti generalmente evitare di eseguire il rilevamento specifico del browser in quanto spesso può essere inaffidabile (e può essere falsificato). Nella maggior parte dei casi si preferisce utilizzare l'effettivo rilevamento delle caratteristiche , che può essere fatto attraverso una libreria come Modernizr .

Come sottolineato nella risposta di Brennen , possono sorgere problemi durante l'esecuzione di questo rilevamento all'interno dell'app di Facebook. Si prega di vedere la sua risposta per gestire questo scenario.

Risorse correlate

— Rion Williams
fonte
9
haha, stai facendo la differenza tra l'approccio jQuery e l'approccio Javascript?
— Harmen,
4
Perché questo ha 2 pollici in giù?
— Rocket Hazmat,
3
Esiste un metodo per rilevarlo, in base alle funzioni di supporto, in modo da non utilizzare l'agente utente del navigatore?
— albanx,
6
Un errore di battitura (dovrebbe essere iPad invece di iPod) "a" non "o".
— Satish,
4
Grazie Satish - Avevo voluto che quella sezione fosse per un iPod. L'ho incluso come tangente alla domanda originale.
— Rion Williams,
22

Sebbene la soluzione accettata sia corretta per iPhone, dichiarerà erroneamente entrambi isiPhonee isiPadsarà vera per gli utenti che visitano il tuo sito sul proprio iPad dall'app di Facebook.

La saggezza convenzionale è che i dispositivi iOS hanno un user agent per Safari e un user agent per UIWebView. Questa ipotesi non è corretta in quanto le app iOS possono personalizzare il proprio user agent. Il principale colpevole qui è Facebook.

Confronta queste stringhe dell'agente utente da dispositivi iOS:

# iOS Safari
iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
iPhone: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

# UIWebView
iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176
iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117

# Facebook UIWebView
iPad: Mozilla/5.0 (iPad; U; CPU iPhone OS 5_1_1 like Mac OS X; en_US) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1.1;FBBV/4110.0;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/5.1.1;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBSF/1.0]
iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; ru_RU) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1;FBBV/4100.0;FBDV/iPhone3,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/5.1.1;FBSS/2; tablet;FBLC/en_US]

Nota che sull'iPad, la stringa dell'agente utente di UIWebView di Facebook include 'iPhone'.

Il vecchio modo di identificare iPhone / iPad in JavaScript:

IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);

Se dovessi seguire questo approccio per rilevare iPhone e iPad, finiresti con IS_IPHONE e IS_IPAD entrambi veri se un utente proviene da Facebook su un iPad. Ciò potrebbe creare un comportamento strano!

Il modo corretto di identificare iPhone / iPad in JavaScript:

IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
if (IS_IPAD) {
  IS_IPHONE = false;
}

Dichiariamo che IS_IPHONE è falso su iPad per coprire il bizzarro agente utente di Facebook UIWebView per iPad. Questo è un esempio di come lo sniffing dell'agente utente non è affidabile. Più app iOS personalizzano il proprio user agent, più problemi avranno gli sniffer di user agent. Se riesci a evitare lo sniffing dell'agente utente (suggerimento: CSS Media Query), Fallo.

— Brennan Moore
fonte
1
Puoi combinare il tuo abbinamento iPhone / iPod in un singolo regex come /iPh?o(ne|d)/i, o /(iPhone|iPod)/ise stai per rilasciare un iPhod: P.
— Cobby,
9

Io lo uso questo:

function fnIsAppleMobile() 
{
    if (navigator && navigator.userAgent && navigator.userAgent != null) 
    {
        var strUserAgent = navigator.userAgent.toLowerCase();
        var arrMatches = strUserAgent.match(/(iphone|ipod|ipad)/);
        if (arrMatches != null) 
             return true;
    } // End if (navigator && navigator.userAgent) 

    return false;
} // End Function fnIsAppleMobile


var bIsAppleMobile = fnIsAppleMobile(); // TODO: Write complaint to CrApple asking them why they don't update SquirrelFish with bugfixes, then remove
— Stefan Steiger
fonte
Grazie era esattamente quello che stavo cercando.
— techie_28,
Non riesce sul desktop perché se non riesce a trovare nulla restituisce un oggetto con il contenuto null, ho modificato la seconda condizione e funziona benissimo: if (arrMatches! = Null) {return true; }
— Joe L.
8

Io lo uso questo:

//http://detectmobilebrowsers.com/ + tablets
(function(a) {
    if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
    ||
    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
    {
        window.location="yourNewIndex.html"
    }
})(navigator.userAgent||navigator.vendor||window.opera);
— Ntinos Koletsis
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.