¿Detecta usuarios de iPad usando jQuery?

Respuestas:

317

Detección de iPad

Debería poder detectar a un usuario de iPad mirando la userAgentpropiedad:

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

Detección de iPhone / iPod

Del mismo modo, la platformpropiedad para verificar dispositivos como iPhones o iPods:

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

Notas

Si bien funciona, generalmente debe evitar realizar una detección específica del navegador, ya que a menudo puede ser poco confiable (y puede ser falsificado). Se prefiere usar la detección de características real en la mayoría de los casos, lo que se puede hacer a través de una biblioteca como Modernizr .

Como se señaló en la respuesta de Brennen , pueden surgir problemas al realizar esta detección dentro de la aplicación de Facebook. Por favor, vea su respuesta para manejar este escenario.

Recursos Relacionados

Rion Williams
fuente
9
jaja, ¿estás haciendo una diferencia entre el enfoque jQuery y el enfoque Javascript?
Harmen
44
¿Por qué esto tiene 2 pulgares hacia abajo?
Rocket Hazmat
3
¿Existe algún método para detectarlo, en base a las funciones de soporte, para no utilizar el agente de usuario del navegador?
albanx
66
Un error tipográfico (debe ser iPad en lugar de iPod) "a" no "o".
Satish
44
Gracias Satish. Tenía la intención de que esa sección fuera para un iPod. Lo incluí como una tangente a la pregunta original.
Rion Williams
22

Aunque la solución aceptada es correcta para iPhone, declarará incorrectamente ambos isiPhoney isiPadserá cierta para los usuarios que visiten su sitio en su iPad desde la aplicación de Facebook.

La sabiduría convencional es que los dispositivos iOS tienen un agente de usuario para Safari y un agente de usuario para UIWebView. Esta suposición es incorrecta ya que las aplicaciones de iOS pueden personalizar su agente de usuario y lo hacen. El principal delincuente aquí es Facebook.

Compare estas cadenas de agente de usuario de dispositivos 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]

Tenga en cuenta que en el iPad, la cadena de agente de usuario de Facebook UIWebView incluye 'iPhone'.

La antigua forma de identificar 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 tuviera que seguir este enfoque para detectar iPhone y iPad, terminaría con IS_IPHONE e IS_IPAD, ambos verdaderos si un usuario viene de Facebook en un iPad. ¡Eso podría crear un comportamiento extraño!

La forma correcta de identificar 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;
}

Declaramos que IS_IPHONE es falso en los iPads para cubrir el extraño agente de usuario de iPad UIWebView de Facebook. Este es un ejemplo de cómo el rastreo de agentes de usuario no es confiable. Cuantas más aplicaciones de iOS personalicen su agente de usuario, más problemas tendrá el rastreo de agentes de usuario. Si puede evitar el rastreo del agente de usuario (sugerencia: Consultas de medios CSS), HÁGALO.

Brennan Moore
fuente
1
Puede combinar la coincidencia de su iPhone / iPod en una sola expresión regular /iPh?o(ne|d)/i, o /(iPhone|iPod)/isi está a punto de lanzar un iPhod: P.
Cobby
9

Yo uso esto:

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
fuente
Gracias, era exactamente lo que estaba buscando.
techie_28
Falla en el escritorio porque si no puede encontrar nada devuelve el objeto con el contenido nulo, modifiqué la segunda condición y funciona bien: if (arrMatches! = Null) {return true; }
Joe L.
8

Yo uso esto:

//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
fuente