javascript - Detectar iPad Mini en HTML5

El iPad Mini de Apple es un clon más pequeño del iPad 2 en más aspectos de los que quisiéramos. En JavaScript, el objeto window.navigator muestra los mismos valores para el Mini y el iPad 2. Mis pruebas hasta ahora para detectar la diferencia no han tenido éxito.

¿Por qué es esto importante?

Como las pantallas del iPad Mini y del iPad 2 son idénticas en píxeles pero varían en tamaño real (pulgadas/centímetros), varían en PPI (píxeles por pulgada).

Para que las aplicaciones web y los juegos ofrezcan una interfaz de usuario amigable, ciertos elementos se ajustan en tamaño en relación con la posición del pulgar o el dedo del usuario; por lo tanto, es posible que queramos escalar ciertas imágenes o botones para ofrecer una mejor experiencia de usuario.

Cosas que he intentado hasta ahora (incluyendo algunos enfoques bastante obvios):

• window.devicepixelratio

• Ancho del elemento CSS en unidad cm
• Consultas de medios CSS (como resolution y -webkit-device-pixel-ratio)
• Dibujos SVG en unidades similares
• Haciendo todo tipo de transformaciones CSS webkit durante un tiempo determinado y contando los fotogramas renderizados con requestAnimFrame (esperaba detectar una diferencia medible)

Estoy completamente sin ideas. ¿Y tú?

Actualización Gracias por las respuestas hasta ahora. Me gustaría comentar sobre las personas que votan en contra de detectar un iPad mini frente a un 2, ya que Apple tiene, ehm, una directriz que lo gobierna todo. Bien, aquí está mi razonamiento sobre por qué siento que realmente tiene todo el sentido del mundo saber si una persona está usando un iPad mini o un 2. Y hagan con mi razonamiento lo que quieran.

El iPad mini no solo es un dispositivo mucho más pequeño (9,7 pulgadas frente a 7,9 pulgadas), sino que su factor de forma permite un uso diferente. El iPad 2 generalmente se sostiene con dos manos al jugar, a menos que seas Chuck Norris. El mini es más pequeño, pero también mucho más ligero y permite jugar sosteniéndolo con una mano mientras usas la otra para deslizar, tocar o lo que sea. Como diseñador y desarrollador de juegos, me gustaría saber si es un mini para poder elegir ofrecer al jugador un esquema de control diferente si quiero (por ejemplo, después de hacer pruebas A/B con un grupo de jugadores).

¿Por qué? Bueno, es un hecho comprobado que la mayoría de los usuarios tienden a usar la configuración predeterminada, así que dejar fuera un joystick virtual y poner algún otro control basado en toques en la pantalla (solo dando un ejemplo arbitrario aquí) cuando el jugador carga el juego por primera vez es lo que yo, y probablemente otros diseñadores de juegos, nos encantaría poder hacer.

Así que, en mi humilde opinión, esto va más allá de las discusiones sobre dedos gruesos/directrices y es simplemente algo que Apple y todos los demás proveedores deberían hacer: permitirnos identificar de manera única tu dispositivo y pensar diferente en lugar de seguir directrices.

Respuesta #1

Reproduce un archivo de audio estéreo y compara la respuesta del acelerómetro cuando el volumen es alto en el canal derecho y en el canal izquierdo; el iPad2 tenía altavoces mono, mientras que el iPad Mini tiene altavoces estéreo integrados.

Necesito tu ayuda para recopilar los datos, por favor visita esta página y ayúdame a recopilar datos para esta idea loca. No tengo un iPad mini, así que realmente necesito tu ayuda

Respuesta #2

Actualización: Parece que estos valores muestran el ancho y alto de la ventana gráfica en el momento de la creación de la pestaña, y no cambian al rotar, ¡así que este método no puede usarse para la detección del dispositivo!

Puedes usar tanto screen.availWidth como screen.availHeight, ya que parecen ser diferentes para el iPad Mini y el iPad 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

Fuente: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

Respuesta #3

Entiendo que esto podría ser una solución un poco rudimentaria, pero dado que parece que aún no podemos encontrar otra cosa..

Asumo que ya revisaste la mayoría de los otros dispositivos, así que veo posibles los siguientes escenarios.

Podrías comprobar TODOS los posibles dispositivos más populares que requieren CSS/tamaño especial, y si no coincide con ninguno de esos, ¿supone que es un iPad mini o simplemente le preguntas al usuario?

// Device checks here
...
else {
  // it would probably be better to make this a nicer popup-thing
  var mini = prompt("Are you using a iPad mini? Press yes for a better user experience");
  // Store the result for future visits somehow.
}

Sé que eso podría parecer un enfoque estúpido ahora mismo, pero si actualmente no tenemos forma de decidir si el dispositivo es un iPad mini o un iPad 2, al menos el sitio web será usable con dispositivos iPad mini haciendo algo como esto.

Incluso podrías optar por algo como esto:

Para ofrecerle la mejor experiencia de navegación posible, intentamos detectar el tipo de dispositivo que utiliza para personalizar el sitio web según su dispositivo. Desafortunadamente, debido a limitaciones, esto no siempre es posible y actualmente no podemos determinar si utiliza un iPad 2 o un iPad mini utilizando estos métodos.

Para la mejor experiencia de navegación posible, por favor seleccione a continuación el dispositivo que está utilizando.

Esta elección se almacenará para futuras visitas al sitio web en este dispositivo.

[] iPad 2 
[*] iPad mini
[] Ancient blackberry device

"

No estoy completamente familiarizado con lo que se puede y no se puede hacer del lado del cliente en Javascript. Sé que se puede obtener la IP de un usuario, pero ¿es posible obtener la dirección MAC de un usuario? ¿Son diferentes esos rangos entre un iPad2 y un iPad mini?

Respuesta #4

Sé que es una solución horrible, pero en este momento la única manera de diferenciar entre un iPad Mini y un iPad 2 es comprobar su número de compilación y asociar cada número de compilación con el dispositivo correspondiente.

Déjame darte un ejemplo: el iPad mini, versión 6.0, está mostrando "10A406" como número de compilación, mientras que el iPad 2 está mostrando "10A5376e".

Este valor se puede obtener fácilmente mediante una expresión regular en el agente de usuario (window.navigator.userAgent); ese número tiene el prefijo "Mobile/".

Desafortunadamente, esta es la única manera inequívoca de detectar un iPad Mini; sugeriría adoptar un enfoque relacionado con viewport (donde sea compatible, usando unidades vh/vw) para mostrar correctamente el contenido en diferentes tamaños de pantalla.

Respuesta #5

tl;dr No compenses la diferencia entre el iPad mini y el iPad 2 a menos que también vayas a compensar entre dedos gordos y delgados.

Parece que Apple está deliberadamente intentando que no puedas notar la diferencia. Parece que Apple no quiere que escribamos código diferente para las distintas versiones de tamaño de los iPads. No siendo parte de Apple, no lo sé con certeza, solo estoy diciendo que así es como parece. Tal vez, si la comunidad de desarrolladores crea un detector sofisticado para el iPad mini, Apple podría deliberadamente romper ese detector en futuras versiones de iOS. Apple quiere que establezcas tu tamaño mínimo objetivo en 44 puntos de iOS, y iOS mostrará eso en dos tamaños, el tamaño más grande de iPad y el tamaño más pequeño de iPhone/iPad mini. 44 puntos son bastante generosos, y tus usuarios ciertamente sabrán si están en el iPad más pequeño, por lo que pueden compensar por sí mismos.

Sugiero retroceder a la razón que mencionaste para pedir el detector: ajustar el tamaño del objetivo para la comodidad del usuario final. Al decidir diseñar un tamaño para el iPad grande y otro tamaño para el iPad pequeño, estás decidiendo que todas las personas tienen el mismo tamaño de dedos. Si tu diseño es lo suficientemente ajustado como para que la diferencia de tamaño entre un iPad 2 y un iPad mini haga una diferencia, entonces el tamaño de los dedos entre mi esposa y yo hará una diferencia mayor. Así que compensa el tamaño de los dedos del usuario, no el modelo de iPad.

Tengo una sugerencia sobre cómo medir el tamaño del dedo. Soy un desarrollador nativo de iOS, así que no sé si esto se puede lograr en HTML5, pero aquí está cómo mediría el tamaño del dedo en una aplicación nativa. Haría que el usuario pellizcara dos objetos juntos y luego mediría qué tan cerca logran juntarlos. Los dedos más pequeños acercarán más los objetos, y se puede usar esta medida para derivar un factor de escala. Esto se ajusta automáticamente al tamaño del iPad. La misma persona tendrá una medida más grande de puntos en pantalla en un iPad mini que en un iPad 2. Para un juego, puedes llamar a esto un paso de calibración, o ni siquiera mencionarlo. Tenlo como un paso inicial. Por ejemplo, en un juego de disparos, haz que el jugador ponga la munición en el arma con un movimiento de pellizco.

Respuesta #6

Pide al usuario que deje caer su iPad desde varios miles de pies sobre el suelo. Luego, utiliza el acelerómetro interno para medir el tiempo que tarda el iPad en alcanzar la velocidad terminal. El iPad más grande tiene un coeficiente de arrastre mayor y debería alcanzar la velocidad terminal en menos tiempo que un iPad Mini.

Aquí hay un código de ejemplo para ayudarte a empezar.

function isIPadMini( var timeToReachTerminalVelocity )
{
    return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);
}

Casi con toda seguridad necesitarás revisar este código cuando Apple inevitablemente lance el próximo iPad en un factor de forma diferente. Pero estoy seguro de que te mantendrás al tanto de las cosas y mantendrás este truco para cada nueva versión del iPad.

Respuesta #7

Desafortunadamente, en este momento parece que esto no es posible: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Hace dos días, tuiteé sobre el primer problema detectado: «Se confirma que el Agente de Usuario del iPad Mini es el mismo que el del iPad 2». He recibido literalmente cientos de respuestas diciendo que es una mala práctica identificar por agente de usuario, que deberíamos detectar características y no dispositivos, etc., etc.

Bueno, sí chicos, tienen razón, pero no tiene relación directa con el problema. Y necesito añadir la segunda mala noticia: no existe ninguna técnica del lado del cliente para hacer ”detección de funciones” tampoco.

Respuesta #8

Esto es una suposición atrevida, pero una de las diferencias entre el iPad 2 y el iPad mini es que el primero no tiene un giroscopio de 3 ejes. Tal vez sea posible usar la API de orientación del dispositivo de WebKit para ver qué tipo de información se puede obtener de él.

Por ejemplo, esta página parece sugerir que solo puedes obtener el valor de rotationRate si el dispositivo tiene un giroscopio.

Lo siento, no puedo dar un POC funcional - no tengo acceso a un iPad mini. Tal vez alguien que sepa un poco más sobre estas APIs de orientación pueda intervenir aquí.

Respuesta #9

Bueno, el iPad 2 y el iPad Mini tienen baterías de diferentes tamaños.

Si iOS 6 lo soporta, puedes obtener el nivel de batería actual de 0.0..1.0 usando window.navigator.webkitBattery.level. En algún nivel, ya sea en hardware o software, eso probablemente se calcula como CurrentLevel/TotalLevel, donde ambos son enteros. Si es así, eso resultará en un número decimal que es un múltiplo de 1/TotalLevel. Si tomas muchas lecturas del nivel de batería de ambos dispositivos y calculas battery.level * n, podrías ser capaz de encontrar un valor de n donde todos los resultados empiecen a acercarse a enteros, lo que te dará iPad2TotalLevel y iPadMiniTotalLevel.

Si esos dos números son diferentes y primos entre sí, entonces en producción puedes calcular battery.level * iPad2TotalLevel y battery.level * iPadMiniTotalLevel. El que esté más cerca de un entero indicará qué dispositivo se está utilizando.

¡Perdón por la cantidad de 'si' en esta respuesta! Espero que surja algo mejor.

Respuesta #10

EDICIÓN 1: Mi respuesta original, a continuación, fue "no lo hagas". En aras de ser positivo:

La verdadera pregunta, creo, no tiene nada que ver con el iPad X vs. iPad mini. Creo que se trata de optimizar las dimensiones de los elementos de la interfaz de usuario y su colocación según la ergonomía del usuario. Necesitas determinar el tamaño del/los dedo/s del usuario para poder definir el tamaño de los elementos de la interfaz y, tal vez, su posicionamiento. Esto, de nuevo, es y probablemente debería determinarse sin necesidad de saber realmente en qué dispositivo estás ejecutando la aplicación. Exageremos: tu aplicación se está ejecutando en una pantalla de 40 pulgadas en diagonal. No sabes la marca ni el modelo ni el DPI. ¿Cómo dimensionas los controles?

Necesitas mostrar un botón que sea el elemento de acceso al sitio/juego. Te dejaré a ti decidir dónde o cómo tiene sentido hacer esto.

Aunque el usuario verá esto como un solo botón, en realidad estará compuesto por una matriz de pequeños botones muy juntos que están visualmente cubiertos para parecer una sola imagen de botón. Imagina un botón de 100 x 100 píxeles compuesto por 400 botones, cada uno de 5 x 5 píxeles. Necesitas experimentar para ver qué tiene sentido aquí y cuán pequeño debe ser tu muestreo.

CSS posible para el conjunto de botones:

.sense_row {
  width:100px;
  height:5px;
  margin:0;
  padding:0;
}

.sense_button {
  float:left;
  width:3px;
  height:3px;
  padding:0px;
  margin:0px;
  background-color:#FF0;
  border:1px solid #000;
} 

Y la matriz resultante:

Cuando el usuario toca la matriz de botones, efectivamente obtendrás una imagen del área de contacto del dedo del usuario. Luego, puedes usar los criterios que quieras (probablemente derivados empíricamente) para llegar a un conjunto de números que puedes usar para escalar y posicionar los distintos elementos de la interfaz de usuario según tus requisitos.

La belleza de este enfoque es que ya no te importa qué nombre o modelo de dispositivo puedas estar usando. Todo lo que te importa es el tamaño del dedo del usuario en relación con el dispositivo.

Me imagino que este botón sense_array podría ocultarse como parte del proceso de ingreso a la aplicación. Por ejemplo, si es un juego, tal vez haya un botón de "Jugar" o varios botones con los nombres de los usuarios o un medio para seleccionar en qué nivel jugarán, etc. Te haces la idea. El botón sense_array podría estar en cualquier lugar que el usuario tenga que tocar para entrar al juego.

EDIT 2: Solo señalando que probablemente no necesites tantos botones sensoriales. Un conjunto de círculos concéntricos o botones dispuestos como un enorme asterisco * podría funcionar bastante bien. Tienes que experimentar.

Con mi antigua respuesta, a continuación, te estoy dando ambos lados de la moneda.

RESPUESTA ANTIGUA:

La respuesta correcta es: No hagas esto. Es una mala idea.

Si tus botones son tan pequeños que se vuelven inutilizables en un mini, necesitas hacer tus botones más grandes.

Si he aprendido algo al hacer aplicaciones nativas de iOS, es que intentar ser más listo que Apple es una fórmula para dolor y frustración innecesarios. Si eligieron no permitirte identificar el dispositivo, es porque, bueno, en su sandbox, no deberías.

Me pregunto, ¿estás ajustando el tamaño/ubicación en vertical frente a horizontal?

Respuesta #11

¿Qué tal un microbenchmark, calcular algo que tome aproximadamente X microsegundos en el iPad 2 y Y segundos en el iPad mini.

Probablemente no sea lo suficientemente preciso, pero podría haber alguna instrucción en la que el chip del iPad mini sea más eficiente.

Respuesta #12

Sí, es un buen punto para revisar el giroscopio. Puedes hacerlo fácilmente con

https://developer.apple.com/documentation/webkitjs/devicemotionevent

o algo así

window.ondevicemotion = function(event) {
    if (navigator.platform.indexOf("iPad") != -1 && window.devicePixelRatio == 1) {
        var version = "";
        if (event.acceleration) version = "iPad2";
        else version="iPad Mini";

        alert(version);
    }
    window.ondevicemotion = null;
}

No tengo ningún iPad para probarlo.