El iPad Mini de Apple es un clon más pequeño del iPad 2 en más formas de las que quisiéramos. En JavaScript, el window.navigator
objeto expone los mismos valores para Mini y iPad 2. Hasta ahora, mis pruebas para detectar la diferencia no han tenido éxito.
¿Porque es esto importante?
Como las pantallas del iPad Mini y 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 del dedo del usuario, por lo tanto, es posible que queramos escalar ciertas imágenes o botones para proporcionar una mejor experiencia de usuario.
Cosas que he probado hasta ahora (incluidos algunos enfoques bastante obvios):
window.devicepixelratio
- Ancho del elemento CSS en cm unidad
- Consultas de medios CSS (como
resolution
y-webkit-device-pixel-ratio
) - Dibujos SVG en unidades similares
- Hacer todo tipo de webkit CSS se transforma durante un tiempo determinado y contar cuadros procesados con
requestAnimFrame
(esperaba detectar una diferencia medible)
Se me acaban las ideas. ¿Qué hay de tí?
Actualización Gracias por las respuestas hasta ahora. Me gustaría comentar sobre las personas que votan en contra de detectar iPad mini versus 2, ya que Apple tiene uhm, una guía para descartarlos a todos. Bien, aquí está mi razonamiento por el que siento que realmente tiene sentido en el mundo saber si una persona está usando un iPad mini o un 2. Y haz con mi razonamiento lo que te gusta.
El iPad mini no es solo un dispositivo mucho más pequeño (9.7 pulgadas versus 7.9 pulgadas), sino que su factor de forma permite un uso diferente. El iPad 2 generalmente se sostiene con las dos manos cuando juegas, a menos que seas Chuck Norris . El mini es más pequeño, pero también es mucho más liviano y permite el juego donde lo sostienes con una mano y usas la otra para deslizar o tocar o cualquier otra cosa. Como diseñador y desarrollador de juegos, me gustaría saber si es un mini para poder elegir proporcionarle al jugador un esquema de control diferente si lo deseo (por ejemplo, después de las pruebas A / B con un grupo de jugadores).
¿Por qué? Bueno, es un hecho comprobado que la mayoría de los usuarios tienden a ir con la configuración predeterminada, por lo que omiten una barra virtual y ponen algún otro control basado en el toque 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, me encantaría poder hacer.
Entonces, en mi humilde opinión, esto va más allá de las discusiones sobre los dedos gruesos / pautas y es algo que Apple y todos los demás proveedores deberían hacer: permitirnos identificar de manera única su dispositivo y pensar de manera diferente en lugar de seguir las pautas.
fuente
Respuestas:
Reproduzca un archivo de audio estéreo y compare la respuesta del acelerómetro cuando el volumen sea 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 incorporados.
Necesito su ayuda para recopilar los datos, visite esta página y ayúdeme a recopilar datos para esta idea loca. No tengo un iPad mini, así que realmente necesito tu ayuda
fuente
new webkitAudioContext().destination.numberOfChannels
devuelve?Actualización: Parece que estos valores informan el ancho y la altura de la ventana gráfica en el momento de la creación de la pestaña, y no cambian con la rotación, por lo que este método no se puede usar para la detección del dispositivo .
Puede usar uno
screen.availWidth
o más,screen.availHeight
ya que parecen ser diferentes para iPad Mini y iPad 2.Ipad mini
Ipad 2
Fuente: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/
fuente
Entiendo que esta podría ser una solución poco tecnológica, pero dado que parece que todavía no podemos encontrar nada más ...
Supongo que ya verifica la mayoría de los otros dispositivos, por lo que veo los siguientes escenarios posibles.
Puede verificar TODOS los dispositivos más populares posibles que requieren CSS / dimensionamiento especial, y si no coincide, ninguno de ellos asume que es un iPad mini o simplemente le pregunta al usuario.
Sé que puede parecer un enfoque estúpido en este momento, 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á utilizable con dispositivos iPad mini que hagan algo como esto.
Incluso podrías ir con algo como esto:
"Para brindarle la mejor experiencia de navegación posible, tratamos de detectar su tipo de dispositivo para personalizar el sitio web a su dispositivo. Desafortunadamente, debido a limitaciones, esto no siempre es posible y actualmente no podemos determinar si usa un iPad 2 o un iPad mini utilizando estos métodos.
Para obtener la mejor experiencia de navegación posible, seleccione a continuación el dispositivo que está utilizando.
Esta opción se almacenará para futuras visitas al sitio web en este dispositivo.
"
No estoy completamente familiarizado con lo que puede y no puede hacer del lado del cliente en Javascript. Sé que puede obtener la IP de un usuario, pero ¿es posible obtener la dirección MAC de un usuario? ¿Son esos rangos diferentes entre iPad2 y iPad mini?
fuente
Sé que es una solución horrible, pero en este momento la única forma de diferenciar entre un iPad Mini y un iPad 2 es verificar su número de compilación y asignar cada número de compilación con el dispositivo relacionado.
Permítame darle un ejemplo: iPad mini, versión 6.0, está exponiendo "
10A406
" como número de compilación, mientras que iPad 2 está exponiendo "10A5376e
".Este valor se puede obtener fácilmente a través de una expresión regular en el agente de usuario (
window.navigator.userAgent
); ese número tiene el prefijo "Mobile/
".Desafortunadamente, esta es la única forma inequívoca de detectar un iPad Mini; Sugeriría adoptar un
viewport
enfoque relacionado (cuando sea compatible, utilizando unidades vh / vw) para mostrar correctamente los contenidos en diferentes tamaños de pantalla.fuente
tl; dr No compense la diferencia entre iPad mini y iPad 2 a menos que también compense entre dedos gordos y delgados.
Apple parece estar tratando deliberadamente de no dejarte notar la diferencia. Apple parece no querer que escribamos un código diferente para las versiones de diferentes tamaños de iPads. Al no ser parte de Apple, no lo sé con certeza, solo digo que así es como parece. Tal vez, si la comunidad de desarrolladores presenta un detector elegante para iPad mini, Apple puede romper deliberadamente ese detector en futuras versiones de iOS. Apple quiere que establezca su tamaño objetivo mínimo en 44 puntos de iOS, y iOS lo mostrará en dos tamaños, el tamaño de iPad más grande y el tamaño mini de iPhone / iPad más pequeño. 44 puntos es bastante generoso, y sus usuarios seguramente sabrán si están en el iPad más pequeño, por lo que pueden compensar por sí mismos.
Sugiero volver a la razón establecida para pedir el detector: ajustar el tamaño del objetivo para la comodidad del usuario final. Al decidir diseñar para un tamaño en el iPad grande y otro tamaño en el iPad pequeño, decide que todas las personas tienen los mismos dedos de tamaño. Si su diseño es lo suficientemente ajustado como para que la diferencia de tamaño de un iPad 2 y un iPad mini haga una diferencia, el tamaño de los dedos entre mi esposa y yo marcará una diferencia mayor. Por lo tanto, compense el tamaño del dedo del usuario, no el modelo de iPad.
Tengo una sugerencia sobre cómo medir el tamaño de los dedos. Soy un desarrollador nativo de iOS, así que no sé si esto se puede lograr en HTML5, pero así es como mediría el tamaño del dedo en una aplicación nativa. Le pido al usuario que junte dos objetos y luego mida qué tan cerca se juntan. Los dedos más pequeños acercarán los objetos, y puede usar esta medida para obtener un factor de escala. Esto se ajusta automáticamente para el tamaño del iPad. La misma persona tendrá una medida más grande de los puntos en pantalla en un iPad mini que en un iPad 2. Para un juego, puede llamar a esto un paso de calibración, o incluso no llamarlo. Téngalo como un paso inicial. Por ejemplo, en un juego de disparos, haga que el jugador ponga la munición en la pistola con un movimiento de pellizco.
fuente
Pídale al usuario que deje caer su iPad desde varios miles de pies sobre el suelo. Luego use el acelerómetro interno para medir el tiempo que le toma al iPad 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 muestra para comenzar.
Casi seguro que necesita volver a visitar este código cuando Apple inevitablemente lanza el próximo iPad en un factor de forma diferente. Pero estoy seguro de que se mantendrá al tanto de las cosas y mantendrá este truco para cada nueva versión del iPad.
fuente
Desafortunadamente, por el momento parece que esto no es posible: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent
fuente
Este es un tiro salvaje, pero una de las diferencias entre iPad 2 y 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 WebKit para ver qué tipo de información puede obtener de ella.
Por ejemplo, esta página parece sugerir que solo puede obtener el
rotationRate
valor si el dispositivo tiene un giroscopio.Lo siento, no puedo dar un POC que funcione, no tengo acceso a un iPad mini. Quizás alguien que sepa un poco más sobre estas API de orientación pueda intervenir aquí.
fuente
Bueno, el iPad 2 y el iPad Mini tienen baterías de diferentes tamaños.
Si iOS 6 lo admite, puede obtener el nivel actual de batería
0.0..1.0
usandowindow.navigator.webkitBattery.level
. En algún nivel, ya sea en hardware o software, eso probablemente se calcula comoCurrentLevel / TotalLevel
, donde ambos son ints. Si es así, eso dará como resultado un flotador que es un múltiplo de1 / TotalLevel
. Si toma muchas lecturas de nivel de batería de ambos dispositivos y calculabattery.level * n
es posible que pueda encontrar un valor de n donde todos los resultados comienzan a estar cerca de los enteros, lo que le daráiPad2TotalLevel
yiPadMiniTotalLevel
.Si esos dos números son diferentes, y primos mutuos, entonces en producción puede calcular
battery.level * iPad2TotalLevel
ybattery.level * iPadMiniTotalLevel
. El que esté más cerca de un número entero indicará qué dispositivo se está utilizando.Perdón por el número de ifs en esta respuesta! Con suerte, algo mejor vendrá.
fuente
EDITAR 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 y la ubicación de los elementos de la interfaz de usuario para la ergonomía del usuario. Debe determinar el tamaño de los dedos del usuario para controlar el tamaño del elemento de la interfaz de usuario y, quizás, el posicionamiento. Esto, nuevamente, es y probablemente debería llegarse sin necesidad de saber realmente en qué dispositivo se está ejecutando. Exageremos: su aplicación se ejecuta en una pantalla diagonal de 40 pulgadas. No sé la marca y modelo o el DPI. ¿Cómo dimensionas los controles?
Debe mostrar un botón que es el elemento de activación en el sitio / juego. Te dejaré a ti decidir dónde o cómo tiene sentido hacer esto.
Si bien el usuario verá esto como un solo botón, en realidad estará compuesto por una matriz de pequeños botones apretados que están visualmente cubiertos para aparecer como una imagen de un solo botón. Imagine un botón de 100 x 100 píxeles formado por 400 botones, cada uno de 5 x 5 píxeles. Debe experimentar para ver qué tiene sentido aquí y cuán pequeño debe ser su muestreo.
Posible CSS para la matriz de botones:
Y la matriz resultante:
Cuando el usuario toca la matriz de botones, efectivamente, obtendrá una imagen del área de contacto del dedo del usuario. Luego puede usar los criterios que desee (probablemente derivados empíricamente) para llegar a un conjunto de números que puede usar para escalar y colocar los diversos elementos de la interfaz de usuario según sus requisitos.
La belleza de este enfoque es que ya no le importa el nombre o modelo del dispositivo con el que podría estar tratando. Lo único que le 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 entrada en la aplicación. Por ejemplo, si se trata de un juego, tal vez haya un botón "Jugar" o varios botones con los nombres de los usuarios o un medio para seleccionar a qué nivel jugarán, etc. Se entiende la idea. El botón sense_array podría vivir en cualquier lugar que el usuario tenga que tocar para ingresar al juego.
EDITAR 2: Solo notando que probablemente no necesites tantos botones de detección. Un conjunto de círculos concéntricos o botones dispuestos como un gran asterisco
*
podría funcionar bien. Tienes que experimentar.Con mi vieja respuesta, a continuación, te doy las dos caras de la moneda.
ANTIGUA RESPUESTA:
La respuesta correcta es: no hagas esto. Es una mala idea.
Si sus botones son tan pequeños que se vuelven inutilizables en un mini, debe agrandar sus botones.
Si he aprendido algo al hacer aplicaciones nativas de iOS es que tratar de ser más astuto que Apple es una fórmula para el dolor y la agravación indebidos. Si decidieron no permitirle identificar el dispositivo, es porque, bueno, en su caja de arena, no debería hacerlo.
Me pregunto, ¿estás ajustando el tamaño / ubicación en vertical frente a horizontal?
fuente
¿Qué pasa con un micro benchmark? Calcule algo que tome aproximadamente X microsegundos en iPad 2 e Y sec en iPad mini.
Probablemente no sea lo suficientemente preciso, pero puede haber algunas instrucciones para que el chip del iPad mini sea más eficiente.
fuente
Sí, es un buen punto para verificar el giroscopio. Puedes hacerlo fácilmente con
https://developer.apple.com/documentation/webkitjs/devicemotionevent
o algo así
No tengo ningún iPad para probarlo.
fuente
Solicite a todos los usuarios con el agente de usuario iPad2 que proporcionen una foto con la cámara integrada y detecten la resolución con la API de archivo HTML . Las fotos del iPad Mini tendrán mayor resolución debido a las mejoras en la cámara.
También puede jugar creando un elemento de lienzo invisible y convertirlo a PNG / JPG utilizando la API de Canvas. No tengo ninguna forma de probarlo, pero los bits resultantes pueden ser diferentes debido al algoritmo de compresión subyacente y la densidad de píxeles del dispositivo.
fuente
¿Siempre podrías preguntarle al usuario?
Si el usuario no puede ver los botones o el contenido, entonces bríndeles una forma de administrar la escala. Siempre puede incorporar algunos botones de escala en el sitio para hacer que el contenido (texto / botones) sea más grande / más pequeño. Esto estaría (casi) garantizado para funcionar con cualquier resolución actual de iPad y probablemente cualquier resolución futura que Apple decida querer hacer.
fuente
Esta no es una respuesta a su pregunta como se plantea, pero espero que sea más útil que decir "no hagas eso":
En lugar de detectar el iPad Mini, ¿por qué no detectar que un usuario está teniendo dificultades para presionar el control (o: está presionando constantemente en una subregión del control) y aumentar / reducir el tamaño del control para acomodarlo?
Los usuarios que necesitan controles más grandes los obtienen independientemente del hardware; los usuarios que no necesitan controles más grandes y desean ver más contenido también lo obtienen. No es tan simple como simplemente detectar el hardware, y habrá algunas cosas sutiles para corregir, pero si se hiciera con cuidado, podría ser realmente agradable.
fuente
Esto me recuerda una cita de la película Equilibrium:
Estamos tan acostumbrados a luchar por soluciones, cuando a veces es mejor preguntar. (Hay buenas razones por las que generalmente no hacemos esto, pero siempre es una opción). Todas las sugerencias aquí son brillantes, pero una solución simple podría ser que su programa pregunte qué iPad están usando cuando lo inician. .
Sé que esta es una respuesta descarada, pero espero que sea un recordatorio de que no tenemos que luchar por todo. (Me preparé para los votos negativos.: P)
Algunos ejemplos:
La mejor de las suertes: ¡espero que encuentres una solución increíble! Sin embargo, si no lo hace, no olvide este.
fuente
No respondiendo la pregunta, pero la pregunta detrás de la pregunta:
Su objetivo es mejorar la experiencia del usuario en una pantalla más pequeña. La apariencia de los controles de la interfaz de usuario es una parte de ella. Otra parte de UX es la forma en que responde la aplicación.
¿Qué sucede si hace que el área que responde a los grifos sea lo suficientemente grande como para ser fácil de usar en el iPad Mini mientras mantiene la representación visual de los controles de la interfaz de usuario lo suficientemente pequeña como para ser visualmente agradable en el iPad?
Si ha reunido suficientes toques que no estaban en el área visual, puede decidir escalar visualmente los controles de la interfaz de usuario.
Como beneficio adicional, esto también funciona para manos grandes en iPad.
fuente
Todas las soluciones aquí no están preparadas para el futuro (lo que impide que Apple lance un iPad con el mismo tamaño de pantalla que el iPad 2 pero con la misma resolución que el iPad Mini). Entonces se me ocurrió una idea:
Crea un div con 1 pulgada de ancho y añádelo al cuerpo. Luego creo otro div con 100% de ancho y lo agrego al cuerpo:
La función jQuery width () siempre devuelve valores en píxeles para que pueda simplemente:
screenSize ahora tiene el tamaño disponible para la aplicación en pulgadas (aunque tenga cuidado de redondear errores). Puede usar eso para colocar su GUI de la manera que le guste. Además, no olvides eliminar los divs inútiles después.
También tenga en cuenta que el algoritmo propuesto por Kaspars no solo no funcionará si el usuario ejecuta la aplicación como pantalla completa, sino que también se romperá si Apple parchea la interfaz de usuario del navegador.
Esto no diferenciará los dispositivos, pero como explicaste en tu edición, lo que realmente quieres saber es el tamaño de la pantalla del dispositivo. Mi idea tampoco le dirá exactamente el tamaño de la pantalla, pero le dará una información aún más útil, el tamaño real (en pulgadas) que tiene disponible para dibujar su GUI.
EDITAR: use este código para verificar si realmente funciona en su dispositivo. No tengo ningún iPad para probarlo.
Debería abrir una ventana con el tamaño de su pantalla en pulgadas. Parece funcionar en mi computadora portátil, devolviendo 15.49 mientras la pantalla de mi computadora portátil se comercializa como 15.4 ''. ¿Alguien puede probar esto en iPads y publicar comentarios por favor? No olvides ejecutarlo a pantalla completa.
EDIT2: Resulta que la página en la que lo probé tenía un CSS conflictivo . Arreglé el código de prueba para que funcione correctamente ahora. Necesita position: absolute en los divs para que pueda usar la altura en%.
EDITAR3: Investigué un poco, y parece que no hay forma de obtener el tamaño de la pantalla en ningún dispositivo. No es algo que el sistema operativo pueda saber. Cuando usa una unidad del mundo real en CSS, en realidad es solo una estimación basada en algunas propiedades de su pantalla. No hace falta decir que esto no es exacto en absoluto.
fuente
No probado, pero en lugar de reproducir un archivo de audio y verificar el balance, podría funcionar escuchar el micrófono, extraer el ruido de fondo y calcular su "color" (gráfico de frecuencia). Si el iPad Mini tiene un modelo de micrófono diferente al del iPad 2, entonces su color de fondo debería ser considerablemente diferente y algunas técnicas de huellas dactilares de audio podrían ayudarlo a determinar qué dispositivo está en uso.
No creo seriamente que sea factible y valga la pena en este caso específico, pero creo que las huellas dactilares del ruido de fondo podrían usarse en algunas aplicaciones, por ejemplo, para decirle dónde está cuando está dentro de un edificio.
fuente
Basado en la pregunta de Douglas sobre
new webkitAudioContext().destination.numberOfChannels
el iPad 2, decidí hacer algunas pruebas.Comprobando numberOfChannels devuelto
2
en iPad mini pero nada en iPad 2 con iOS 5 y2
también con iOS 6.Luego traté de verificar si webkitAudioContext está disponible
Lo mismo ocurre con iPad Mini y iPad 2 con iOS 6 devuelve verdadero, mientras que iPad 2 con iOS 5 devuelve falso.
(Esta prueba no funciona en el escritorio, para el escritorio verifique si webkitAudioContext es una función).
Aquí está el código para que pruebe: http://jsfiddle.net/sqFbc/
fuente
¿Qué sucede si creó un grupo de divisiones de 1 "x1" de ancho y las agregó una por una a una división principal hasta que el cuadro delimitador saltó de 1 pulgada a 2 pulgadas? Una pulgada en el mini es del mismo tamaño que una pulgada en el iPad, ¿verdad?
fuente
En iOS7 hay una configuración de todo el sistema que el usuario puede modificar: cuando las cosas se vuelven demasiado pequeñas para leer, la configuración de Tamaño de texto se puede cambiar.
Ese tamaño de texto se puede usar para formar una interfaz de usuario de dimensiones plausibles, por ejemplo, para un botón (probado en iPad Mini Retina para reaccionar a los cambios de configuración de Tamaño de texto):
( CSS de botón de muestra , gracias a jsfiddle y cssbuttongenerator)
fuente
Estoy detectando el iPad mini creando un lienzo que es más grande que un iPad mini puede renderizar , llenando un píxel y luego leyendo el color nuevamente. El iPad mini lee el color como '000000'. todo lo demás lo representa como el color de relleno.
Código parcial:
Necesito esto para el tamaño del lienzo, por lo que es la detección de características en mi caso de uso.
fuente