Detectar iPad Mini en HTML5


376

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.navigatorobjeto 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 resolutiony -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.


buena pregunta ... incluso yo estaba buscando una solución. No se encontró nada en la web
AnhSirk Dasarp

44
Lo mejor es presentar un error con apple bugreporter.apple.com. Si suficientes personas lo hacen, hay esperanza de que nos escuchen. La situación actual es bastante desalentadora.
William Jockusch

¿No puedes usar -webkit-min-device-pixel-ratio:? En cuanto al iPhone 4 mobilexweb.com/blog/…
Bgi


1
Hmmm, ¿qué tal seguir al HIG en lugar de tratar de hacer esto? Esto es una pérdida de tiempo y esfuerzo, y sinceramente me enfermó leer esto. ¿Por qué la gente no puede hacer las cosas de la manera correcta?
Elland

Respuestas:


253

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


35
¿No crees que el dispositivo que suena cuando visitas el sitio web es una mala idea? Sin mencionar que las personas pueden tener su dispositivo en silencio. Ningún sonido detendría esto.
flexd

66
Como una ligera modificación a esto: Reproduzca un archivo de audio estéreo donde el canal derecho es una versión invertida del canal izquierdo. Con un solo altavoz, deben cancelar y no afectar el acelerómetro. Pero de cualquier manera, confiar en los altavoces + acelerómetro es muy poco confiable.
Kevin Ennis

44
Alguien realmente necesita implementar esta solución y mostrar los resultados.
Stephen Eilert

14
En este sentido, en el iPad2, ¿qué new webkitAudioContext().destination.numberOfChannelsdevuelve?
Douglas

3
@flexd, ¿no crees que la detección de dispositivos es una mala idea?
Ricardo Tomasi

132

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.availWidtho más, screen.availHeightya que parecen ser diferentes para iPad Mini y 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/


3
Hasta ahora parece la mejor solución sin compromiso.
Morgan Wilde

Me pregunto acerca de esta diferencia. Pensé que ambos usan la misma resolución? ¿Safari Chrome es diferente en estos dos dispositivos?
Marc

10
Este es un detector de cuántas pestañas están abiertas. En mi iPad 3, informa diferentes valores cuando tengo más de un toque abierto, coincidiendo con los informes en las capturas de pantalla. La captura de pantalla del iPad mini tiene dos pestañas abiertas, mientras que la captura del iPad 2 tiene solo una. Mi iPad 3 informa valores coincidentes cuando tengo una o dos pestañas abiertas.
Señor Berna

77
No, este no es un detector de cuántas pestañas están abiertas: es un detector de qué orientación estaba abierta el dispositivo cuando la pestaña que se estaba usando para cargar esta página se "usó" por primera vez. No estoy seguro de si esto se debe a que el tamaño de la ventana gráfica ahora está realmente fija en ese valor después de girar la pestaña, o si simplemente se está almacenando en caché de forma incorrecta en algún lugar, pero si se sienta y juega con varias pestañas en varias rotaciones configuraciones puede ver cómo se correlaciona. Lo que se pone interesante es que si cambias las pestañas, giras y luego vuelves a la pestaña anterior y vuelves a cargar, se actualiza.
Jay Freeman -saurik-

1
Sí, Jay, cometí un error similar, atribuyendo mal un resultado a la causa equivocada. Pero mi punto implícito es que este no es un detector para iPad minis, ya que dará resultados falsos positivos en otros iPads.
Señor Berna

84

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.

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

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

"

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?


25
Estoy muy de acuerdo con esta solución. Permitir que el usuario elija (y posiblemente cambie) su dispositivo es mejor que bloquearlo en lo que cree que quiere. Si puede determinar el dispositivo con bastante precisión; utilizo eso por defecto, pero creo que siempre debe ofrecer una opción, incluso si está oculto en un menú de configuración.
Liam Newmarch

2
@LiamNewmarch También soy un gran fanático de adivinar y avisar al usuario, en lugar de asumir la preferencia del usuario y bloquearlo. A veces quiero usar el sitio de escritorio en mi iPad. ¡Normalmente quiero usar la versión en inglés de un sitio, independientemente de dónde la maldita base de datos IP-to-Geo dice que actualmente estoy ubicado geográficamente! tiene mi voto, señor.
Rebecca

77
Sin embargo, recomendaría no usar una pregunta emergente. haga una pancarta como SO cuando inicia sesión automáticamente. De modo que el usuario puede leer la página si no le interesa responder, en lugar de verse obligado a abandonar su mentalidad para responder una pregunta.
Michael Allen

1
Al hacer la pregunta a los usuarios, degradas la experiencia del usuario lo suficiente como para que Apple pueda hacer el cambio, ya que eso es algo que nos importa mucho.
JiminyCricket

99
-1: Odio las páginas que me hacen preguntas cuando las visito. Mi respuesta: "¿A quién le importa, solo muéstrame el contenido!". La diferencia entre iPad2 y iPad mini no es lo suficientemente grande (IMnsHO) como para garantizar este enfoque. JS sí, preguntas no.
johndodo

74

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 viewportenfoque relacionado (cuando sea compatible, utilizando unidades vh / vw) para mostrar correctamente los contenidos en diferentes tamaños de pantalla.


55
El número de compilación parece ser la clave, pero he notado que el número de compilación puede variar según el país en el que se compró el dispositivo. Por ejemplo, en Grecia, el número de compilación del iPad 2 parece ser 10A403 en lugar de 10A5376e, que también vi de los iPad 2 de EE. UU. Supongo que el número de compilación para los mini también puede diferir.
esjr

67
Esta solución es incorrecta. Para algún contexto: el "número de compilación" describe el sistema operativo y no el hardware. Ahora, si diferentes dispositivos siempre tuvieran diferentes compilaciones de SO, eso estaría bien, pero eso solo fue cierto en el pasado para la primera versión de SO que vino con cada nuevo dispositivo. En este caso, 10A406 es el número de compilación de 6.0 para el iPad Mini, y 10A403 fue el número de compilación de 6.0 para el iPad 2 ( no 10A5376e, que era 6.0 beta 4). Sin embargo, el número de compilación de 6.0.1 en ambos ya es 10A523, por lo que la compilación actual ya es idéntica y las compilaciones futuras seguirán siéndolo.
Jay Freeman -saurik-

1
Me temo que Jay está en lo correcto, verificó mis datos (tal como están): el número de compilación refleja el sistema operativo.
esjr

1
¿Has probado este truco PPI? stackoverflow.com/questions/279749/… - básicamente crea un elemento oculto con un ancho de 1 pulgada, luego obtén el ancho en píxeles. Eso debería resolver su problema raíz.
JohnLBevan

@JohnLBevan: eso puede resolver el problema de representación, pero ¿qué pasa con los análisis de registro, etc.? El problema raíz es con nuestros amigos en Cupertino y el impulso hacia las aplicaciones 'nativas'.
esjr

69

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.


1
Este primer párrafo es la respuesta correcta. El tamaño objetivo recomendado de 44 puntos está perfectamente bien.
Ricardo Tomasi

Hombre, si solo tuviera mil votos más para dar. El primer párrafo es, de hecho, ganó Internet.
Mike

31

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.

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

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.


¿No debería ser "más tiempo que un iPad mini"?
ThomasW

1
Buena línea de pensamiento Galileo-ish aplicada a un problema moderno ... Me pregunto qué
será

2
Para hacer esto más confiable, las fundas de iPad deben retirarse antes de la caída.
Fuhrmanator

28

Desafortunadamente, por el 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 iPad Mini User Agent es el mismo que el iPad 2 ". He recibido literalmente cientos de respuestas que dicen que la detección de agentes de usuario es una mala práctica, que debemos detectar funciones, no dispositivos, etc.

Bueno, sí, muchachos, tienen razón, pero no tiene una relación directa con el problema. Y necesito agregar la segunda mala noticia: tampoco hay una técnica del lado del cliente para hacer "detección de características" .


8
@ net.uk.sweet - Entonces, ¿por qué no editas la respuesta y corriges los errores? Y por cierto, el inglés en el texto citado no parece tan malo.
Sandman

@shi, ¿cómo puedes saber que el autor de ese texto citado es italiano? No soy hablante nativo de inglés tampoco. LOL
Toby D

"no existe una técnica del lado del cliente para hacer 'detección de características' tampoco" es completamente falso. detección de funciones = detección de dispositivos
Ricardo Tomasi

@Mytic Moon Acabo de ver el artículo original que está vinculado en la publicación anterior donde hay información sobre el autor.
shi

26

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 rotationRatevalor 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í.


3
Entonces, el sitio web de Apple no describe el giroscopio en el iPad 2 como un giroscopio de "3 ejes"; pero, cuando dicen "giroscopio", se refieren a un tipo específico de parte (de modo que los desarrolladores de aplicaciones que desarrollan juegos que requieren esa parte por la capacidad del giroscopio pueden estar seguros de que está allí y funcionará para ellos). Si realiza una búsqueda en Google de "" giroscopio de 3 ejes "" iPad 2 "', encontrará numerosos artículos de finales de 2010 y principios de 2011 que hablan de cómo se espera que el iPad 2 salga con la misma parte de giroscopio de 3 ejes que el iPhone 4 ya tenía: cuando salió, no nos decepcionó; P.
Jay Freeman -saurik-

Esto es en lo que basé mi sugerencia: apple.com/ipad/ipad-2/specs.html No menciona ningún giroscopio. Solo "acelerómetro". Dado eso, y el hecho de que sus documentos parecen sugerir que algunos dispositivos solo admiten un subconjunto de la API de movimiento, vale la pena intentarlo. Lo haría, si tuviera un iPad mini ...
Assaf Lavie

2
No, en serio: dice "giroscopio" en la misma sección pequeña que "acelerómetro". Supongo que puedo publicar una captura de pantalla de la página web que acabas de vincular con la palabra "giroscopio" resaltada, pero deberías poder encontrarla con ctrl-F. (editar: OK, por valor del humor, hice eso: i.imgur.com/8BZhx.png <- ¿lo ves ahora?; P) Independientemente, para poner la diferencia de "giroscopio de 3 ejes" aún más para descansar, si vaya a las páginas de nivel inferior que Apple guarda para este tipo de cosas como referencia de soporte histórico, puede ver que específicamente dice "giroscopio de 3 ejes". support.apple.com/kb/SP622
Jay Freeman -saurik-

1
Bueno, realmente no hay necesidad de especular si realmente hay una diferencia entre las capacidades de la API de movimiento en el iPad mini y el iPad 2. Es solo una cuestión de probarlo y verlo. Entonces, ¿quién tiene un iPad mini aquí? De todos modos, llegué a esta idea mirando las especificaciones técnicas de ambos dispositivos y buscando diferencias que pueden detectarse en HTML / JS. Puede haber otras diferencias también.
Assaf Lavie

20

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.0usando window.navigator.webkitBattery.level. En algún nivel, ya sea en hardware o software, eso probablemente se calcula como CurrentLevel / TotalLevel, donde ambos son ints. Si es así, eso dará como resultado un flotador que es un múltiplo de 1 / 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á iPad2TotalLevely iPadMiniTotalLevel.

Si esos dos números son diferentes, y primos mutuos, entonces en producción puede calcular battery.level * iPad2TotalLevel y battery.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á.


18

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:

.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:

conjunto de botones

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?


Espera, ¿leíste la pregunta? "ciertos elementos se ajustan en tamaño en relación con la posición del pulgar o del dedo del usuario"
Christian

Mi pregunta era si el OP está ajustando o no los elementos en función de la orientación vertical / horizontal. Los navegadores web se ajustarán automáticamente al ancho adicional del paisaje y renderizarán todo el contenido más que el retrato. Simplemente estoy tratando de señalar que, a menos que bloquee todo, casi no hay forma de optimizar para cada dispositivo, orientación y usuario posibles a menos que esté escribiendo una aplicación nativa de iOS. Incluso entonces es posible que desee tener cuidado con las elecciones que haga. ¿Podría hacerse esto desde una aplicación web y javascript? Probablemente. Simplemente no creo que sea una buena idea.
Martin

Ah, ya veo. Una edición interesante también, estaría interesado en ver algo así en la práctica.
Christian el

1
¿Funcionaría una "matriz de sentidos" como esa? Supongo que iOS elegiría la celda más cercana al lugar donde el usuario tocó y solo "hacer clic" en eso, no todas las celdas debajo del dedo del usuario. Sin embargo, si funcionara, sería genial.
HellaMad

No hay razón para que no funcione. Es un montón de objetos que responden a eventos táctiles y envían mensajes.
Martin

11

¿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.


11

Sí, es un buen punto para verificar 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.


12
Esta solución no funciona (probado en un iPad Mini y un iPad 2: ambos se detectan como "iPad2") como 1) el evento. La función de aceleración está diseñada para funcionar si el dispositivo tiene el giroscopio elegante o el acelerómetro más antiguo y 2) según el sitio web de Apple, tanto el iPad Mini como el iPad 2 tienen la parte elegante del giroscopio, por lo que no hay forma de que el concepto de esta verificación hubiera funcionado en primer lugar.
Jay Freeman -saurik-

8

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.


7

¿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.


6

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.


6

Esto me recuerda una cita de la película Equilibrium:

"¿Cuál dirías que es la forma más fácil de quitarle un arma a un clérigo de Grammaton?"

"Se lo pides".

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 detección de teclado durante las instalaciones del sistema operativo a veces no puede detectar un teclado específico, por lo que el instalador tiene que preguntar.
  • Windows pregunta si una red a la que se conecta es una red doméstica o una red pública.
  • Las computadoras no pueden detectar a la persona que está a punto de usarlo, por lo que requieren un nombre de usuario y contraseña.

La mejor de las suertes: ¡espero que encuentres una solución increíble! Sin embargo, si no lo hace, no olvide este.


Puede que no sea algo de lo que los usuarios no técnicos estarían al tanto.
Julian

5

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.


5

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:

var div1= $("<div/>").appendTo(document.body).width("1in");
var div2= $("<div/>").appendTo(document.body).width("100%");

La función jQuery width () siempre devuelve valores en píxeles para que pueda simplemente:

var screenSize= div2.width() / div1.width();

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.

var div1= $("<div/>").appendTo(document.body).width("1in").height("1in").css("position", "absolute");
var div2= $("<div/>").appendTo(document.body).width("100%").height("100%").css("position", "absolute");
var width= div2.width() / div1.width()
var height= div2.height() / div1.height()
alert(Math.sqrt(width*width + height*height));

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.


¿Lo has probado? ¿1 pulgada es realmente la misma pulgada física en el Mini y el iPad? Es posible que 1 pulgada en el Mini solo aparezca como 1/2 pulgada.
Kernel James

Probado en iPad 2, 3 y Mini. Los tres regresan 3.8125.
Alfred

@AlfredNerstu wow realmente? ¿Es esto un error conocido de Safari? ¿Puedes probarlo en Safari para Mac?
Hoffmann el

@AlfredNerstu lo siento, el código estaba mal, lo arreglé ahora, la página en la que lo probé originalmente tenía un CSS conflictivo que lo hizo funcionar. Resulta que necesitas position: absolute en el div para usar valores de altura en%. Ahora ese código me da 15.49 pulgadas en mi computadora portátil de 15.4 '' en una página "limpia" (sin CSS y sin elementos además de los divs).
Hoffmann el

Probé el nuevo código y ahora todos los 2, 3 y Mini devuelven 9.5. Ejecuto el código en un jsfiddle, ¿no sé si eso podría estropear algo? ¿Es más probable que Safari en iOS esté hecho para la pantalla de 9.7 pulgadas y renderice 1 pulgada en consecuencia?
Alfred

2

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.


2

Basado en la pregunta de Douglas sobre new webkitAudioContext().destination.numberOfChannelsel iPad 2, decidí hacer algunas pruebas.

Comprobando numberOfChannels devuelto 2en iPad mini pero nada en iPad 2 con iOS 5 y 2también con iOS 6.

Luego traté de verificar si webkitAudioContext está disponible

var hasWebkitAudio = typeof(webkitAudioContext) === "object";
alert(hasWebkitAudio);​

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/


2

¿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?


1
Así que probé esto, pero en el mini, una "pulgada" es más pequeña que una "pulgada" en el iPad normal. Entonces esta manera no funcionará.
Scovetta

2

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):

padding: 0.5em 1em 0.5em 1em;
font: -apple-system-body;    

( CSS de botón de muestra , gracias a jsfiddle y cssbuttongenerator)


1

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:

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);

Necesito esto para el tamaño del lienzo, por lo que es la detección de características en mi caso de uso.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.