Erkennen Sie iPad-Benutzer mit jQuery?

Question

Gibt es eine Möglichkeit festzustellen, ob der aktuelle Benutzer ein iPad mit jQuery/JavaScript verwendet?

Answer 1

iPad Erkennung

sollten Sie in der Lage sein, ein iPad Benutzer zu erfassen, indem Sie einen Blick auf die userAgent Eigenschaft unter:

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

iPhone/iPod-Erkennung

Auch die platform Eigenschaft für Geräte wie iPhones oder iPods zu überprüfen:

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

Hinweise

Während es funktioniert, sollten Sie in der Regel vermeiden browserspezifischen Erkennung durchführen, wie es oft unzuverlässig sein können (und kann gefälscht werden). Es wird bevorzugt, in den meisten Fällen den tatsächlichen feature-detection zu verwenden, was über eine Bibliothek wie Modernizr erfolgen kann.

Wie in Brennen's answer gezeigt, können Probleme auftreten, wenn diese Erkennung innerhalb der Facebook App durchgeführt wird. Bitte lesen Sie seine Antwort zur Handhabung dieses Szenarios.

Verwandte Ressourcen

• jQuery HowTo: Detect iPad users using JavaScript
• jQuery HowTo: Detecting & Redirecting iPad/iPhone Users
• David Walsh's Blog : Detecting iPad use
• Detecting iPad use via PHP

Answer 2

Ich benutze diese:

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 

Answer 3

Obwohl die accepted solution ist korrekt für iPhones, es wird falsch beide erklären isiPhone und isiPad gilt für Benutzer, um Ihre Website von der Facebook-App auf ihrem iPad zu besuchen.

Die gängige Meinung ist, dass iOS-Geräte über einen Benutzer-Agent für Safari und einen Benutzer-Agent für das UIWebView verfügen. Diese Annahme ist falsch, da iOS-Apps ihren Benutzeragenten anpassen können. Der Haupttäter hier ist Facebook.

Vergleichen Sie diese User-Agent-Strings von iOS-Geräten:

# 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] 

Beachten Sie, dass auf dem iPad, der User-Agent-String des Facebook UIWebView 'iPhone' enthält.

Der alte Weg iPhone/iPad in JavaScript zu identifizieren:

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

Wenn Sie zum Erkennen iPhone und iPad mit diesem Ansatz gehen, würden Sie mit IS_IPHONE und IS_IPAD beide wahr am Ende, wenn Ein Nutzer kommt von Facebook auf einem iPad. Das könnte seltsames Verhalten hervorrufen!

Der richtige Weg iPhone/iPad in JavaScript zu identifizieren:

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

Wir erklären IS_IPHONE falsch zu sein auf iPads für den bizarren Facebook UIWebView iPad User-Agenten zu decken. Dies ist ein Beispiel dafür, wie User Agent Sniffing unzuverlässig ist. Je mehr iOS-Apps ihren User-Agent anpassen, desto mehr Probleme hat das User-Agent-Sniffing. Wenn Sie User Agent Sniffing vermeiden können (Hinweis: CSS Media Queries), DO IT.

Answer 4

Ich benutze diese:

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

Answer 5

Keine Notwendigkeit für jQuery hier. Die Verwendung des Benutzeragenten zur Bestimmung der Plattform, auf der Sie arbeiten, ist der klassische Ansatz. Es ist nicht so einfach wie es scheint - es wurde bereits erwähnt, dass es viele Grenzfälle gibt, auf die man stoßen könnte.

Ich schrieb diese is-mobile component, die erkennen kann, ob Sie auf einem iPad, iPhone und anderen Plattformen auch laufen, und berücksichtigt die verschiedenen Randfälle.

Fühlen Sie sich frei, um es zu importieren und in diesen Beispielen, wie gezeigt verwenden:

isMobile.iPad() => true/false 
isMobile.iPhone() => true/false 
isMobile.iOS() => true/false 
isMobile.Android() => true/false 
isMobile.any() => true/false