Détecter les utilisateurs d'iPad à l'aide de jQuery?

Réponses:

317

Détection iPad

Vous devriez pouvoir détecter un utilisateur d'iPad en jetant un œil à la userAgentpropriété:

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

Détection iPhone / iPod

De même, la platformpropriété de rechercher des appareils tels que des iPhones ou des iPods:

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

Remarques

Tant que cela fonctionne, vous devriez généralement éviter d'effectuer une détection spécifique au navigateur car elle peut souvent être peu fiable (et peut être usurpée). Il est préférable d'utiliser la détection de fonctionnalités réelle dans la plupart des cas, ce qui peut être fait via une bibliothèque comme Modernizr .

Comme indiqué dans la réponse de Brennen , des problèmes peuvent survenir lors de cette détection dans l'application Facebook. Veuillez consulter sa réponse pour gérer ce scénario.

Ressources associées

— Rion Williams
source
9
haha, vous faites une différence entre l'approche jQuery et l'approche Javascript?
— Harmen
4
Pourquoi cela a-t-il 2 pouces vers le bas?
— Rocket Hazmat
3
Existe-t-il une méthode pour le détecter, dans la base des fonctions de support, afin de ne pas utiliser l'agent utilisateur du navigateur?
— albanx
6
Une faute de frappe (devrait être iPad au lieu d'iPod) "un" pas "o".
— Satish
4
Merci Satish - J'avais prévu que cette section soit pour un iPod. Je l'ai inclus comme tangente à la question initiale.
— Rion Williams
22

Bien que la solution acceptée soit correcte pour les iPhones, elle déclarera à tort les deux isiPhoneet isiPadsera vraie pour les utilisateurs visitant votre site sur leur iPad à partir de l'application Facebook.

La sagesse conventionnelle est que les appareils iOS ont un agent utilisateur pour Safari et un agent utilisateur pour UIWebView. Cette hypothèse est incorrecte car les applications iOS peuvent et personnalisent leur agent utilisateur. Le principal contrevenant ici est Facebook.

Comparez ces chaînes d'agent utilisateur à partir d'appareils 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]

Notez que sur l'iPad, la chaîne de l'agent utilisateur de Facebook UIWebView comprend «iPhone».

L'ancienne façon d'identifier iPhone / iPad en JavaScript:

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

Si vous deviez adopter cette approche pour détecter l'iPhone et l'iPad, vous vous retrouveriez avec IS_IPHONE et IS_IPAD étant tous les deux vrais si un utilisateur vient de Facebook sur un iPad. Cela pourrait créer un comportement étrange!

La bonne façon d'identifier l'iPhone / iPad en 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;
}

Nous déclarons que IS_IPHONE est faux sur les iPad pour couvrir l'étrange agent utilisateur Facebook UIWebView iPad. Ceci est un exemple de la façon dont le reniflement d'agent utilisateur n'est pas fiable. Plus il y a d'applications iOS qui personnalisent leur agent utilisateur, plus le reniflement de l'agent utilisateur aura de problèmes. Si vous pouvez éviter le reniflement de l'agent utilisateur (indice: CSS Media Queries), FAITES-LE.

— Brennan Moore
source
1
Vous pouvez combiner votre iPhone / iPod en une seule expression régulière comme /iPh?o(ne|d)/i, ou /(iPhone|iPod)/isi vous êtes sur le point de publier un iPhod: P.
— Cobby
9

J'utilise ceci:

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
source
Merci, c'était exactement ce que je cherchais.
— techie_28
Il échoue sur le bureau car s'il ne trouve rien, renvoie l'objet avec le contenu nul, j'ai modifié la deuxième condition et fonctionne correctement: if (arrMatches! = Null) {return true; }
— Joe L.
8

J'utilise ceci:

//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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.