Wykryć użytkowników iPada za pomocą jQuery?

Odpowiedzi:

317

Wykrywanie iPada

Powinieneś być w stanie wykryć użytkownika iPada, patrząc na userAgentwłaściwość:

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

Wykrywanie iPhone'a / iPoda

Podobnie platformwłaściwość do sprawdzania urządzeń takich jak iPhone czy iPod:

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

Uwagi

Chociaż to działa, generalnie należy unikać wykrywania specyficznego dla przeglądarki, ponieważ często może to być zawodne (i może być sfałszowane). W większości przypadków preferowane jest użycie rzeczywistego wykrywania funkcji , które można wykonać za pomocą biblioteki takiej jak Modernizr .

Jak wskazano w odpowiedzi Brennen , podczas wykonywania tego wykrywania w aplikacji Facebook mogą pojawić się problemy. Zobacz jego odpowiedź dotyczącą obsługi tego scenariusza.

Powiązane zasoby

Rion Williams
źródło
9
haha, robisz różnicę między podejściem jQuery a podejściem Javascript?
Harmen
4
Dlaczego to ma dwa kciuki w dół?
Rocket Hazmat
3
Czy istnieje metoda jego wykrycia w bazie funkcji pomocniczych, aby nie używać agenta użytkownika nawigatora?
albanx
6
Jedna literówka (powinno to być iPad zamiast iPod) "a" nie "o".
Satish
4
Dzięki, Satish - zamierzałem, żeby ta sekcja była dla iPoda. Uwzględniłem to jako styczną do pierwotnego pytania.
Rion Williams,
22

Chociaż zaakceptowane rozwiązanie jest poprawne dla iPhone'ów, będzie błędnie deklarować oba isiPhonei isiPadbędzie prawdziwe dla użytkowników odwiedzających Twoją witrynę na iPadzie z aplikacji Facebook.

Tradycyjna opinia jest taka, że ​​urządzenia iOS mają agenta użytkownika dla Safari i klienta użytkownika dla UIWebView. To założenie jest nieprawidłowe, ponieważ aplikacje na iOS mogą i dostosowują swojego klienta użytkownika. Głównym przestępcą jest tutaj Facebook.

Porównaj te ciągi klientów użytkownika z urządzeń z systemem 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]

Zwróć uwagę, że na iPadzie ciąg agenta użytkownika Facebook UIWebView zawiera „iPhone”.

Stary sposób identyfikacji iPhone'a / iPada w JavaScript:

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

Gdybyś miał zastosować to podejście do wykrywania iPhone'a i iPada, skończyłoby się na tym, że IS_IPHONE i IS_IPAD byłyby prawdziwe, jeśli użytkownik pochodzi z Facebooka na iPadzie. Może to spowodować dziwne zachowanie!

Prawidłowy sposób identyfikacji iPhone'a / iPada w 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;
}

Deklarujemy, że IS_IPHONE jest fałszywe na iPadach, aby pokryć dziwaczny agent użytkownika Facebook UIWebView na iPada. To jest jeden z przykładów zawodności wykrywania klientów użytkownika. Im więcej aplikacji na iOS dostosowuje swojego klienta użytkownika, tym więcej problemów będzie mieć z podsłuchiwaniem klienta użytkownika. Jeśli możesz uniknąć podsłuchiwania klienta użytkownika (wskazówka: CSS Media Queries), ZRÓB TO.

Brennan Moore
źródło
1
Możesz połączyć dopasowanie swojego iPhone'a / iPoda w jedno wyrażenie regularne, jak /iPh?o(ne|d)/ilub /(iPhone|iPod)/ijeśli masz zamiar wydać iPhod: P.
Cobby
9

Używam tego:

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
źródło
Dzięki temu właśnie tego szukałem.
techie_28
Na pulpicie nie działa, ponieważ jeśli nic nie może znaleźć, zwraca obiekt o zawartości zerowej, zmodyfikowałem drugi warunek i działa dobrze: if (arrMatches! = Null) {return true; }
Joe L.
8

Używam tego:

//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
źródło